2/3 初次搭建 Vue 项目遇到的问题汇总

　　今天步子扯开的有点大

　　初步看了一下 Vue-router 然后就开始用脚手架 Vue-cli 来搭建第一个项目了

　　遇到的问题确实很多，还有一些疑问，自己查资料都大致解决了一部分

　　（推荐还是理解了一部分的有缘人进行阅读理解如果有错请大家指正 )

　　按照流水账来说一下首先是

Vue-router

　　这里先简单谈一下，我的理解

　　　　 根据 url 来相应不同的组件以达到 SPA 的效果 ( Single Page Application )

　　这有一例实例代码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <title></title>
 5 </head>
 6 <body>
 7 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 8 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 9 <div id="app">
10   <ul>
11     <li><router-link to="/">Home</router-link></li>
12     <li>
13       <div><router-link to="/about">About</router-link></div>
14       <ul>
15         <!-- 3. 使用嵌套路由 -->
16         <li><router-link to="/about/author">About - Author</router-link></li>
17         <li><router-link to="/about/email">About - Email</router-link></li>
18       </ul>
19     </li>
20   </ul>
21   <router-view></router-view>
22 </div>
23 <script type="text/javascript">
24   let Home = { template: '<h1>This is Home!</h1>' } // Home组件
25   let About = { // About组件
26     template: '<div>' + 
27     '<h1>This is About!</h1>' + 
28     '<router-view></router-view>' +  // 1. 嵌套的动态视图区
29     '</div>'
30   }
31   let Author = { template: '<p>Author: lonelydawn</p>' } // Author组件
32   let Email = { template: '<p>Email: lonelydawn@sina.com</p>' } // Email组件
33   let routes = [ // 定义路由规则, 每一个路由规则应该映射一个视图组件
34     { path: '/', component: Home }, // compoent 就是对应 path 的展示的组件
35     { 
36       path: '/about', 
37       component: About,
38       children: [ // 2. 嵌套子路由
39         { path: 'author', component: Author },
40         { path: 'email', component: Email }
41       ]
42     }
43   ]
44   let router = new VueRouter({ // 创建VueRouter实例, 并传入routes配置
45     routes
46   })
47   let app = new Vue({
48     router
49   }).$mount('#app')
50 </script>
51 </body>
52 </html>

　　其实就是

　　　　" / " 对应的是组件 home

　　　　" /about " 对应的是组件 About

　　　　　　" /about/author " 对应的是组件 Author

　　　　　　" /about/email " 对应的是组件 Email

　　都是调用关系

Vue-cli

　　刚才写的一大堆没了

　　简单写一下

　　1.打开控制台输入

　　　　cnpm install vue-cli -g

　　2.查看是否安装成功

　　　　vue --version

　　3.进入想放置的文件目录初始化项目

　　　　vue init webpack my-project

　　　　　　( 推荐不选择 ESlint 然后是 unit test 和 e2e 不选 )

　　4.还是想放置的目录进行安装项目依赖

　　　　cnpm install

　　5.构建开发版本（按照提示打开浏览器查看）

　　　　npm install

　　6.再打开一个控制台进行构建生产版本

　　　　npm run build

　　这里主要的问题就是没有选择目录创建，一直找不到依赖（我也没装）

　　之后把项目放到 VScode 里面就成功了

Vuex

　　承接上文，我们如果想安装状态控制的话

　　7.还是在原来的目录

　　　　cnpm install vuex --save-dev

　　8.创建相应的文件夹\文件（创建 store 文件夹）

　　　　index.js 是出口引用了 modules 里面的每一个模块（ counter 、 test ）

　　依据 counter 的例子进行梳理

 1 export default {
 2     namespaced: true,
 3     state: {
 4         count: 0
 5     },
 6     getters: {
 7         tenTimesCount (state, getters, rootState, rootGetters) {
 8             console.log(state, getters, rootState, rootGetters)
 9             return state.count * 10
10         }
11     },
12     mutations: {
13         addCount (state,num) {
14             state.count += num || 1
15         }
16     },
17     actions: {
18         addCountAsync (context,num) {
19             setInterval(() => {
20                 if (context.state.count < 2000) {
21                     context.commit('addCount', num || 100)
22                 }
23             }, num || 100);
24         }
25     }
26 }