Vue2项目搭建及项目配置

创建项目(vue-cli2.x)

打开命令行，cd到指定的目录然后指向命令

vue create vue-project //vue-cli3 脚手架初始化
vue init webpack //vue-cli2 脚手架初始化
vue add element //引入elementUI组件
npm i babel-plugin-import -d //引入babel插件

-s是--save(生产)的简写  -d是--save-dev(开发)的简写
-g是-global(全局)的简写

npm i axios -S //引入axios模块 
npm i querystring -s //引入字符串查询模块
npm i normalize.css -s //引入css模块
npm i sass-loader node-sass --save-dev //引入sass模块
npm i echarts -s //引入图标模块
npm i mockjs //引入mockjs 
npm i vuex -s //引入VueX模块

---

Vue-cli2的目录结构

|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- utils.js                     // 构建工具相关
|   |-- vue-loader.conf.js           // webpack loader配置
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置,构建开发本地服务器
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|-- src                              // 源码目录
|   |-- components                   // vue公共组件
|   |-- router                       // vue的路由管理
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- .postcsssrc                      // postcss配置文件
|-- README.md                        // 项目说明
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息,包依赖信息等

推荐阅读：vue-cli项目结构详解

---

Vue-cli3/cli4及以上目录

|-- src                            // 源码目录
|  |-- components                  // vue公共组件
|  |-- router                      // vue的路由管理
|  |-- App.vue                     // 页面入口文件
|  |-- main.js                     // 程序入口文件，加载各种公共组件
|-- public                         // 静态文件，比如一些图片，json数据等
|  |-- favicon.ico                 // 图标文件
|  |-- index.html                  // 入口页面
|-- vue.config.js                  // 是一个可选的配置文件，包含了大部分的vue项目配置
|-- .babelrc                       // ES6语法编译配置
|-- .editorconfig                  // 定义代码格式
|-- .gitignore                     // git上传需要忽略的文件格式
|-- .postcsssrc                    // postcss配置文件
|-- README.md                      // 项目说明
|-- package.json                  // 项目基本信息,包依赖信息等