Vue从入门到精通笔记(第六章)

安装及切换node

安装及切换node对应版本

eslint语法

帮助程序员规范编程，避免格式化

常见错误

1. Newline required at end of file but not found  

})
这里少一行会报错

2. Missing space before function parentheses. 你可以直接按住Command然后点击错误的文件，vscode会自动打开对应错误. 
tenTimesCount(state,..
state括号前面少个空格

3. Expected space(s) after "if" 
if (context.state.count < 2000) {
   
// if后面需要有个空格

4. ) 后面不能尾随空格,否则报错.
}, num || 100)

5. 'mapActions' is defined but never used 
定义的变量如果未使用也会报错,除非注释

Vue实现前端路由

Vue项目化视频教程

实现前端路由三步解决思路

1. components文件夹下先创建组件Counter,写好组件后导出.
2. 在router文件夹下的index.js配置, 导入组件,设置routers
3. App.vue下放入为挂在动态视图的组件

Vue实现前端路由: 步骤一 [图1所示]

components 文件下创建组件Counter,写好组件后导出.
要包含在 template标签中,导出要有name属性

<!--Counter.vue-->
<template>
  <div>Hello World!</div>
</template>

<script>
export default {
    
  name: 'Counter'
}
</script>

<style>

</style>

图1:步骤一

Vue实现前端路由: 步骤二

注册插件Vue.use

// router/index.js
import Vue from 'vue' // 引入vue
import Router from 'vue-router' // 引入路由
import HelloWorld from '@/components/HelloWorld'
import Counter from '@/components/Counter' // 引入组件

Vue.use(Router) // 注册使用

export default new Router({
    // 导出到main.js
  routes: [ // 每个路由都是一个对象
    {
   
      path: '/', // 路径
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
   
      path: '/Counter',
      name: 'Counter',
      component: Counter
    }
  ]
})

// App.vue
<template>
  <div id="app">
    <router-view /> // 负责挂在路由匹配到的视图组件
  </div>
</template>

<script>
export default {
   
  name: 'App'
}
</script>

<style>
</style>

图2:步骤二