vue 项目结构搭建 脚手架的搭建 Vue-cil

vue-cil :vue脚手架：提供基本项目结构

本身集成了很多项目模板：

　　　　webpack：

　　　　webpack-simple:

mac 安装 前提示安装好node

1.输入 sudo npm install -g vue-cli 这个命令；

2.输入 vue

3.输入 vue init webpack-simple vue_demo

4进入cd vue_demo

5 安装 npm install

6运行 sudo npm run dev

搭建

1﹜ 安装Vue-cli 在终端执行npm install –g vue-cli 如果mac系统安装失败请使用 sudo install –g vue-cli

2﹜ 使用vue-cli 新建项目，打开终端找一个你打算存放项目的目录，随便一个目录都可以，在终端执行 vue init webpack vuecli ,PS:vuecli 是项目名称，实际开发中修改成你想用的项目名称即可；

Project name :项目名称，同项目初始化时的名称，如果不做修改直接enter；

Project description：项目描述，这个基本可以不用修改直接enter即可；

Author：作者，enter即可；

Runtime + Compiler: recommended for most users：enter即可；

Ininstall vue-router:是否安装vue-router，如果需要路由功能直接enter，如果不需要直接N 然后enter；

Use ESLint to lint your code?：是否使用ESLint，是一个检查javascript语法错误的工具，这个前期可以直接N掉；

Setup unit tests with Karma + Mocha?：这个前期也可以直接N掉；

Setup e2e tests with Nightwatch?：Nightwatch是一个测试工具，N掉即可，前期用不到；

然后根据提示执行，

cd vuecli：进入项目目录；

npm install ：安装项目依赖，这可能会慢些，因为有些是境外资源，有经验的同学可以更换一下安装源，百度即可；

npm run dev : 运行程序，此时你默认的浏览器会打开一个新的页面，表示你安装成功并成功使用vue-cli初始化了一个项目；

|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- dev-client.js                // 热重载相关
|   |-- dev-server.js                // 构建本地服务器
|   |-- utils.js                     // 构建工具相关
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 测试环境变量
|-- src                              // 源码目录
|   |-- assets                       // 资源目录 
|   |-- components                   // vue公共组件
|   |-- store                        // vuex的状态管理
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|   |-- data                         // 群聊分析得到的数据用于数据可视化
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|   |-- .postcssrc.js                // 通过JS插件装换样式的工具 
|-- README.md                        // 项目说明
|-- favicon.ico 
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息