Vue CLI、Vue Router、Vuex的使用

Vue CLI、Vue Router、Vuex的使用

1. vue-cli(vue脚手架)创建项目

1.1 关于旧版本

• Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。
• 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

1.2 Node 版本要求

• Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)

• 可使用node -v 检查node版本

1.3 安装vue-cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli

检查是否安装成功

vue --version

1.4 创建一个项目

vue create 项目名称

• 可以选默认的包含了基本的 Babel + ESLint 设置的 preset
• 也可以手动选择
• 上下箭头切换，选中之后按换行键 即可进到下一步

手动选择项目风格

上下箭头切换，空格键 选中或取消选中，换行进入下一步

• Babel：是一个js编译器，可以在打包的时候将ES6代码转化为ES5(向后兼容)，选
• TypeScript：是Javascript的一个超集，支持ES6标准，可不选
• Progressive Web App (PWA) Support：PWA,渐进式的网页应用程序，可不选
• Router：Vue中用于管理路由的，选，也可通过指令安装(下文有介绍)
• Vuex：Vue中用于管理状态的，选，也可通过指令安装(下文有介绍)
• CSS Pre-processors：css预处理器，如果要用Sass, Less, Stylus 选，反之可不选
• Linter / Formatter：代码风格 格式校验，如果是做练习可不选，因为需要严格按照格式，
• Unit Testing：单元测试，不选
• E2E Testing： 端到端测试，不选

2. Vue Router 的安装与使用

2.1 安装vue-router

npm install vue-router

2.2 在项目中使用vue-router

• 可以在src目录下新建一个routes文件夹，然后创建一个index.js文件

• 在index.js 文件中

  // 导入Vue
  import Vue from 'vue'
  
  // 导入Vue Router
  import VueRouter from 'vue-router'
  
  // 调用
  Vue.use(VueRouter)
  
  // 定义路由
  const routes =[
      {path:'/',component:Home},
      {path:'/detail',component:Detail}
  ]
  
  // 创建一个router实例
  const router = new VueRouter({
      routes // (ES6缩写) 相当于 routes: routes
  })
  

• 在main.js 文件中注入路由

  import router from '../routes/index.js'
  const app = new Vue({
      router
  }).$mount('#app')
  

• 通过this.$router在其它组件中访问路由对象，通常使用this.$router.push() 进行路由跳转

• 通过this.$route 访问当前路由，里面有我们传入的query、params参数

3. Vuex 的使用

3.1 安装Vuex

npm install vuex --save

3.2 在项目中使用Vuex

• 可以在src目录中新建store文件夹，然后新建一个index.js 文件

• 在index.js 文件中

  import Vue from 'vue'
  import Vuex from 'vuex'
  Vue.use(Vuex)
  
  // 创建一个store 实例
  const store = new Vuex.Store({
      state:{
          // 这里是一些变量
          ...
      },
      mutations:{
          // 这里写一些方法改变state中的变量值
          ...
      }
          
  })
  

• 在main.js 中注入store

  import store from '../store/index.js'
  const app = new Vue({
      store
  }).$mount('#app')
  

• 在别的组件中, 使用this.$store.state.变量名 获取变量值

• 使用this.commit('方法名') 调用mutations里面的方法变更状态.