vue项目构建过程

2017-04-12  本文已影响374人  领家的小猫

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

工欲善其事必先利其器
1. 环境配置
2.安装后生成的文件
3. 安装依赖

构建项目结构几点建议
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](https://img.haomeiwen.com/i3691842/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)}
]

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

上一篇 下一篇

猜你喜欢

热点阅读