最近在学习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
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)}
]
可以在页面上添加路由，**哪里需要路由转换要写 <router-view></router-view>**
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项目熟练运用，还是得多多看官方文档，多做练习。
操作数据
