vue项目构建过程

最近在学习vue2.0 ，写写用vue做项目的构建过程

工欲善其事必先利其器

1. 环境配置

• node 环境
• vue install vue-cli
• vue init webpack my-project // 创建一个基于 webpack 模板的新项目
• cd my-project
• npm install
• npm run dev

2.安装后生成的文件

• app.vue

• main.js //入口文件

• components // 组件

• build 目录是一些webpack的文件，配置参数什么的，一般不用动

• src 源码文件夹，基本上文件都应该放在这里。

• static 生成好的文件会放在这个目录下。

• .babelrc babel编译参数，vue开发需要babel编译ES6语法

• .editorconfig 看名字是编辑器配置文件，不晓得是哪款编辑器，没有使用过。

• .eslintrc.js eslint配置文件，用以规范团队开发编码规范，大中型项目很有用

• .gitignore 用来过滤一些版本控制的文件，比如node_modules文件夹

• index.html 主页

• package.json 项目文件，记载着一些命令和依赖还有简要的项目描述信息

• README.md 介绍自己这个项目的，想怎么写怎么写。不会写就参照github上star多的项目，看人家怎么写的

3. 安装依赖

• stylus // 用stylus写样式需安装
• sass // 用sass写样式需安装
• vue-router // 路由
• vuex // 数据管理
  ...

构建项目结构几点建议
1、避免css冲突，基本布局+组件式的写法，组件统一加父级class
2、多加注释，你写的代码可能还需要给别人看的
3、变量和函数命令要简洁明了风格统一，可以参考element UI组件的写法
4、代码简洁，一个函数不要写的太长，注意拆分和封装，一个组件不要太大，尽量拆分
5、多熟悉数组的字符串操作， 如 forEach filter map every some reduce splice indexOf

4. 项目结构构建好之后，写路由

在 [main.js] 中引入vue-router

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/3691842-c1d8f034547b7383.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import routes from './router/index'

Vue.use(VueRouter)
const router = new VueRouter({
  routes,
  linkActiveClass: 'active'
})

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')


创建路由路径(src/router/index.js)  详情见文档  https://router.vuejs.org/zh-cn/essentials/getting-started.html 
export default [
   {path: '', component: resolve => require([''], resolve)}
]

可以在页面上添加路由，**哪里需要路由转换要写 **

5.写页面，组件

6. vuex状态管理(src/vuex) 【https://vuex.vuejs.org/zh-cn/】

- types 定义类型
- State 单一状态树  存储数据
- Getters 从 store 中的 state 中派生出的一些状态
- Mutations 提交mutations改变state数据状态， **同步**提交
- Actions  通过提交的mutation**异步**改变state数据状态
- store.js 入口文件，在根组件调用，然后所有子组件可以共享数据

好了，整个项目的构建过程就是酱紫，对于vue项目熟练运用，还是得多多看官方文档，多做练习。
操作数据