基于vue+vue-router+vuex+axios+webpack开发的vue2.x Cnode社区
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build 初次提交 Feb 16, 2017
screenshot 初步完成cnode社区项目 Feb 20, 2017
src add github-markdown-css May 9, 2017
static 初次提交 Feb 16, 2017
.babelrc 初次提交 Feb 16, 2017
.gitignore 初次提交 Feb 16, 2017
README.md 提交说明 Apr 5, 2017
index.html 初次提交 Feb 16, 2017
index.tpl 提交 模板 Feb 22, 2017
package.json 增加github-markdown-css样式 Jun 3, 2017
tree.txt 目录结构 Feb 18, 2017

README.md

vue2.x-cnode

关于项目

vue2.x Cnode社区是基于vue、vue-router、vuex、axios、es6开发,使用webpack构建工具编译打包项目

如果此开源项目对大家学习vue的全家桶有帮助,请给我一个star,因为你的star让我觉得这个开源有了价值!

点击查看效果

效果动态图

vue1.x 项目

基于vue1.x已上线积分购项目

效果动态图

扫一扫二维码查看效果

下载 && 启动

# 克隆项目
git clone https://github.com/vincentSea/vue2.x-Cnode.git
# 安装依赖
npm install
# 启动开发环境
npm run dev
# 打包项目
npm run build

项目目录

│  .babelrc         // ES6语法编译配置
│  .gitignore       // git的文件过滤配置
│  index.tpl        // 程序入口html模板
│  package.json     // 项目相关信息配置,通过执行 npm init 命令创建
│  README.md        // 项目说明
│  
├─build             // webpack配置项
│       
├─src               // 项目主文件夹  
│  │  App.vue       // 页面入口文件
│  │  main.js       // 程序入口文件,加载各种公共组件
│  │  
│  ├─assets         // 静态资源,图片、公用样式、插件
│  ├─components     // 公共组件
│  ├─fetch          // 请求api
│  ├─pages          // 页面组件
│  ├─router         // 页面路由配置
|  |─util           // 公用方法 (过滤器、弹窗)
│  └─vuex           // vuex的状态管理
│              
└─static   

webpack 配置

本项目是参考vue-cli快速构建项目,自己搭建项目。后续会改成webpack2.x的版本

安装babel

# 安装babel,编译ES6语法
cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime  babel-preset-stage-2
// 使用babel,编译ES6语法
{
    test: /\.js$/,
    loader: 'babel?presets=es2015',
    exclude: /node_modules/
}

图片路径与打包

# 安装引入图片需要依赖url-loader的加载器
cnpm install --save-dev url-loader
{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url',
    query: {
        limit: 10000,
        name: '[name].[hash:7].[ext]'
    }
}

样式引入打包 scss文件编译

cnpm install --save-dev css-loader sass-loader cssnext-loader
cnpm install --save-dev node-sass
 // 打包引入样式
{
    test: /\.css$/,
    loader: "css-loader?sourceMap!cssnext-loader"
},
// scss文件编译 
{
    test: /\.scss$/,
    loader: "css-loader?sourceMap!sass-loader!cssnext-loader"
}