vue框架的搭建流程
-
vue2.js核心
-
VueRouter实现路由组织工具。
-
vuex实现状态存储
-
axios ajax接口请求工具。
5.sass-loader和 node-sass css 预处理。
-
element-ui基于 vue 的后台组件库。
-
webpack项目打包以及编译工具（代理）。
8.nodejs前端开发环境。
-
npm前端包管理器。
-
vue-cli vue项目脚手架。一键安装 vue 全家桶的工具。
[if !supportLists]1 [endif]框架搭建
3.1本地搭建
[if !supportLists]1. [endif]安装nodejs环境
[if !supportLists]1. [endif]使用vue-cli脚手架搭建vue+webpck项目
npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev
[if !supportLists]2. [endif]使用npm包管理器安装依赖（vuex、axios、sass、element-ui等）
[if !supportLists]3. [endif]配置开发环境（服务代理）
安装sass文件转换为css需要的相关依赖包
npm install–save-dev sass-loader style-loader css-loader
接着，安装extract-text-webpack-plugin，让webpack可以输出css格式的文件
npm install–save-dev extract-text-webpack-plugin
安装成功后，提示需要node-sass做配合，所以下一步是安装node-sass
npm install–save-dev node-sass
[if !supportLists]2 [endif]开发规范
standard标准风格规范
目录规范：
├── README.md // 项目说明文档
├── node_modules // 项目依赖包文件夹
├── build // 编译配置文件，一般不用管
│ ├── build.js │
├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config // 项目基本设置文件夹
│ ├── dev.env.js // 开发配置文件
│ ├── index.js // 配置主文件
│ └── prod.env.js // 编译配置文件
├── index.html // 项目入口文件
├── package-lock.json // npm5 新增文件，优化性能
├── package.json // 项目依赖包配置文件
├── src // 我们的项目的源码编写文件
│ ├── App.vue // APP入口文件
│ ├── assets // 初始项目资源目录
│ │ └── logo.png
│ ├── components // 组件目录
│ │ └── Hello.vue // 测试组件
│ ├── main.js // 主配置文件
│ └── router // 路由配置文件夹
│ └── index.js // 路由配置文件
└── static // 资源放置目录
配置src目录：
├── App.vue // APP入口文件
├── api // 接口调用工具文件夹
│ └── index.js // 接口调用工具
├── component // 组件文件夹，目前为空
├── config // 项目配置文件夹
│ └── index.js // 项目配置文件
├── frame // 子路由文件夹
│ └── frame.vue // 默认子路由文件
├── main.js // 项目配置文件
├── page // 我们的页面组件文件夹
│ ├── content.vue // 准备些 cnodejs 的内容页面
│ └── index.vue // 准备些 cnodejs 的列表页面
├── router // 路由配置文件夹
│ └── index.js // 路由配置文件
├── store // 状态存储文件夹
│ └── module // 模块文件夹–将store分割成模块（module)每个模块拥有自state等
│ │ └── index.js
│ │ └── state.js
│ │ └── action.js
│ │ └── mutation.js
│ │ └── mutation-type.js
│ └── index.js // store主文件
│ └── state.js // state
│ └── action.js // actions
│ └── mutation.js // mutations
│ └── mutation-type.js //使用常量替代Mutation 事件类型
├── style // scss 样式存放目录
│ ├── base // 基础样式存放目录
│ │ ├── _base.scss // 基础样式文件
│ │ ├── _color.scss // 项目颜色配置变量文件
│ │ ├── _mixin.scss // scss 混入文件
│ │ └── _reset.scss // 浏览器初始化文件
│ ├── scss // 页面样式文件夹
│ │ ├── _content.scss // 内容页面样式文件
│ │ └── _index.scss // 列表样式文件
│ └── style.scss // 主样式文件
└── utils // 常用工具文件夹
└── index.js // 常用工具文件
配置assets 目录
├── css // 放一些第三方的样式文件
├── font // 放字体图标文件
├── image // 放图片文件，如果是复杂项目，可以在这里面再分门别类
└── js // 放一些第三方的JS文件，如 jquery（建议放到static中）
配置webpack将接口代理到本地
config/index.js文件
proxyTable: {
‘/api/v1/**’: {
target: ‘https://cnodejs.org’, // 你接口的域名
secure: false,
changeOrigin: false,
}
}
build\webpack.dev.conf.js文件：
proxy: {
‘*’:{
target: ‘http://localhost:4444’,
changeOrigin: true
}
},
[if !supportLists]3 [endif]项目打包部署
打包指令：npm run build
部署：只需要把dist文件夹中打包好的文件部署到真实的服务器环境。