手挽手带你学VUE：四档 Vue-cli3 Vuex Vue-router

jiezi

6 年前

视频教程
由于思否不支持视频外链，视频请移步 https://www.henrongyi.top

你能学到什么
在这一期的学习进度中，我们会开始学习在我们工作开发中真正要使用的开发模式，vue-cli3 脚手架的运用以及 Vue-router 和状态管理仓 Vuex
Vue-cli3 搭建前置
安装 node 环境
因为 Vue-cli3 也是基于 webpack 搭建的，所以我们还是必须要用到 node，如果你的电脑还没有安装 node 的话，可以到 node 官网自行下载安装，https://nodejs.org/zh-cn/ 推荐大家下载 10.14.0 版本。安装过后到命令行执行 node -v 检查版本，如果弹出版本 v10.14.0 的话恭喜你安装成功，我们开始进行下面的步骤了。
全局安装 vue-cli3Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 卸载它。
官方要求安装的 node 版本是大于 8.9 的，我们安装的 node 为 10.14.0，如果你本身的版本低于 8.9 那么可以用 nvm 进行升级
然后我们到命令行执行
npm install -g @vue/cli
等待运行完毕，我们命令行执行
vue –version
如果版本在 3.0 以上，恭喜你安装成功了
接下来我们在命令行运行
vue create hello-world
这时候它会提醒我们来选择需要安装的选项
Vue CLI v3.1.3
┌───────────────────────────┐
│ Update available: 3.2.1 │
└───────────────────────────┘
? Please pick a preset: (Use arrow keys)
> my (vue-router, vuex, less, babel, eslint)
default (babel, eslint)
Manually select features
第一个是我已经保存过的了，我们初次搭建，选择 Manually select features
Vue CLI v3.1.3
┌───────────────────────────┐
│ Update available: 3.2.1 │
└───────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>() Babel
() TypeScript
() Progressive Web App (PWA) Support
() Router
() Vuex
() CSS Pre-processors
() Linter / Formatter
() Unit Testing
() E2E Testing
我们看到如上界面以后，选择 Babel Router Vuex CSS Pre-processors（使用空格键选中）进行下一步
Vue CLI v3.1.3
┌───────────────────────────┐
│ Update available: 3.2.1 │
└───────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? Yes
? Save preset as: MyTest
接下来大家按照如上配置，基本可以完成项目搭建。等待安装完毕后执行

cd helloworld
npm run serve

进入浏览器打开 localhost:8080 如果看到 Vue 的欢迎界面，恭喜你，我们已经迈出成功第一步了
ui 图形化配置界面
在 Vue-cli3 中为大家提供了图形化配置界面执行

vue ui

会开到提示在 localhost:8000 打开了 UI 配置界面，由于个人感觉图形化配置还是不灵活的，这里就先不给大家做太多演示了，要想做好一个 VUE 项目，需要做太多的搭配，我这里会配置一套基本可以使用的 VUE 框架放到个人 github 供大家使用。
.vue 文件的基本结构
<template>
<!– 这里面写 html –>
</template>

export default {
name: ‘home’,
components: {
HelloWorld // 使用组件
}
}
export default {
name:’vue’, // 这里面就写 VUE 组件内的属性即可
}

</script>

我们直接看到入口文件
// main.js

import Vue from ‘vue’
import App from ‘./App.vue’
import router from ‘./router’ // 在入口文件引用了 router 并且在 newVue 的时候把 router 挂在到了 router 属性上
import store from ‘./store’

Vue.config.productionTip = false

new Vue({
router, // 挂载
store,
render: h => h(App)
}).$mount(‘#app’)

接着我们看到 router.js 文件
//router.js

import Vue from ‘vue’
import Router from ‘vue-router’ // 这里引用了 vue-router 并且用 Vue.use 来使用 Router
import Home from ‘./views/Home.vue’

Vue.use(Router)

// Router 的内置属性
export default new Router({
mode: ‘history’, // 要使用 hash 模式还是 history 模式我们一般情况下还是用 hash 模式 history 在后台支持的情况下可以开启
base: process.env.BASE_URL, // 应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 “/app/”
routes: [// 这就是真正写路由的地方了
{
path: ‘/’, // 当路由是 / 的时候我们匹配哪个组件 (这里是 Home.vue)
name: ‘home’,
component: Home
},
{
path: ‘/about’, // 当路由是 /about 的时候我们匹配哪个组件 (About.vue)
name: ‘about’,
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: “about” */ ‘./views/About.vue’) // 路游懒加载，推荐使用这种模式，不过我们需要改写一下
}
]
})

稍微做一下懒加载模式的改写
//router.js

import Vue from ‘vue’
import Router from ‘vue-router’ // 这里引用了 vue-router 并且用 Vue.use 来使用 Router

Vue.use(Router)

const Home = ()=> import(‘./views/Home.vue’) // 使用常量模式提前声明并且在 component 中使用这样我们就完成了一个可以简单实用的路由了
const About = ()=> import(‘./views/About.vue’)

那么这些路由组件怎么展示呢？在哪里展示呢？这里我们要看到 App.vue 文件

<template>
<div id=”app”>
<div id=”nav”>
<router-link to=”/”>Home</router-link>
<!– 使用 router-link 标签添加 to 属性决定我们要路由到什么地方 –>
<router-link to=”/about”>About</router-link>

</div>
<router-view/>
<!– router-view 就是我们要展示路由的地方 –>
</div>
</template>

#nav a {
font-weight: bold;
color: #2c3e50;
}

#nav a.router-link-exact-active {
color: #42b983;
}
</style>
到这里我们一个简单的基础的路由已经写好了可以使用了
vue-router 的子路由
如何创建子路由呢？其实也是相当简单的
//router.js

import Vue from ‘vue’
import Router from ‘vue-router’ // 这里引用了 vue-router 并且用 Vue.use 来使用 Router

Vue.use(Router)

const Home = ()=> import(‘./views/Home.vue’) // 使用常量模式提前声明并且在 component 中使用这样我们就完成了一个可以简单实用的路由了
const About = ()=> import(‘./views/About.vue’)
const Children = ()=> import(‘./views/Children.vue’) // 我们引入这个页面页面内容

// Router 的内置属性
export default new Router({
// mode: ‘history’,
base: process.env.BASE_URL,
routes: [
{
path: ‘/’,
name: ‘home’,
component: Home,
children:[
{
path: ‘about’,
name: ‘about’,
component: About,
},
{
path:’children’,
name:’children’,
component:Children
}, // 这时候我们访问访问 about 实际上是 home 的子路由了
// 它是 home 的子路由，所以我們需要在 home 里面再书写一个路由显示的组件 <router-view/> 子路由的内容就会显示在其 router-view 下面
]
}
]
})

这里我把改进后的 app.vue 和 about.vue 等代码贴出。
<!– app –>
<template>
<div id=”app”>
<router-view/>
</div>
</template>

#nav a {
font-weight: bold;
color: #2c3e50;
}

#nav a.router-link-exact-active {
color: #42b983;
}
</style>

<!– about –>
<template>
<div class=”about”>
<h1>This is an about page</h1>
</div>
</template>

<template>
<!– children –>
<div class=”children”>
<h1>This is an children page</h1>
</div>
</template>
<!– home –>
<template>
<div class=”home”>
<img alt=”Vue logo” src=”../assets/logo.png”>
<div>
<!– <router-link to=”/”>Home</router-link> | –>
<router-link to=”/about”>About</router-link> |
<router-link to=”/children”>children</router-link>
</div>

<router-view></router-view>
</div>
</template>

export default {
name: ‘home’,
components: {
HelloWorld
}
}
</script>

vue-router 传参
编程式的导航 router.push 编程式的导航传参我们需要使用 this.$router.push() 这个方法我们有三种传参方式
<script>
// 字符串

// 这种方式可以实现路由跳转但是没有办法获取到参数没有办法传参
this.$router.push(“children”);
// 对象传参
// 这里面我们就要用到路由里面的 name 属性了
// 命名路由传递参数需要使用 params 来传递，目标页面接收传递参数时使用 this.$route.params
// 特别注意：命名路由这种方式传递的参数，如果在目标页面刷新是会出错的
this.$router.push({name: ‘children’, params: { userId: ‘qm’}})

// 想要传递参数主要就是以对象的方式来写，分为两种方式：命名路由、查询参数，下面分别说明两种方式的用法和注意事项。

// 查询参数
this.$router.push({path: ‘/children’, query: { userId: ‘qm’}});
// 这种方式参数是暴露在地址栏上面的
// 查询参数其实就是在路由地址后面带上参数和传统的 url 参数一致的，传递参数使用 query 而且必须配合 path 来传递参数而不能用 name，目标页面接收传递的参数使用 query。
// 注意：和 name 配对的是 params，和 path 配对的是 query
</script>

声明式的导航 <router-link> 声明式的导航也分为三种方式
<!– 字符串 –>
<router-link to=”children”>click to news page</router-link>
<!– 命名路由 –>
<router-link :to=”{name: ‘children’, params: { userId: ‘qm’}}”>click to news page</router-link>
<!– 查询参数 –>
<router-link :to=”{path: ‘/children’, query: { userId: ‘qm’}}”>click to news page</router-link>
1. 命名路由搭配 params，刷新页面参数会丢失 2. 查询参数搭配 query，刷新页面数据不会丢失 3. 接受参数使用 this.$router 后面就是搭配路由的名称就能获取到参数的值
url 传参
这种传参方法我们需要在书写路由的时候做一个小小的改动

//router.js

import Vue from ‘vue’
import Router from ‘vue-router’

Vue.use(Router)

const Home = ()=> import(‘./views/Home.vue’)
const About = ()=> import(‘./views/About.vue’)
const Children = ()=> import(‘./views/Children.vue’)

// Router 的内置属性
export default new Router({
// mode: ‘history’,
base: process.env.BASE_URL,
routes: [
{
path: ‘/’,
name: ‘home’,
component: Home,
children:[
{
path: ‘about/:id’, // 我们在后面加入 /:id 这样我们在 url 输入的地址相应就变成了 /about/3 我们在 about 组件内通过 this.$route.params 如何动态监听路由的变化呢？要知道当我们仅仅参数变化组件可是没有刷新的，提示一下 watch 可是可以监听某些数据哦~ 实战课程我会带大家了解一下这个该如何运用
name: ‘about’,
component: About,
},
{
path:’children’,
name:’children’,
component:Children
},
]
}
]
})

相应页面改动如下 home.vue about.vue
<!– about –>
<template>
<div class=”about”>
<h1>This is an about page</h1>
{{this.$route.params.id}}
</div>
</template>

<!– home –>
<template>
<div class=”home”>
<img alt=”Vue logo” src=”../assets/logo.png”>
<div>
<router-link to=”/about/3″>About</router-link> |
<router-link to=”/children”>children</router-link>
</div>

<router-view></router-view>
</div>
</template>

export default {
name: ‘home’,
components: {
HelloWorld
},
}
</script>

404 的制作
其实 vue-router 里面还有很多细节内容，这里由于我们是基础课程所以不做太详细的介绍，相信大家在浏览网页的时候经常会看到 404 页面，那么用我们的 vue-router 如何去实现一个 404 呢？实际上是非常简单的我们需要在 router.js 里面书写一个通配路径放置在最后位置，当所有的路径都不匹配的时候，就会去通配这样一个 404 页面提示大家页面丢失了，下面我详细给大家书写一下
// router.js
import Vue from ‘vue’
import Router from ‘vue-router’

Vue.use(Router)

const Home = ()=> import(‘./views/Home.vue’)
const About = ()=> import(‘./views/About.vue’)
const Children = ()=> import(‘./views/Children.vue’)
const NotFound = ()=> import(‘./views/notFound.vue’)

// Router 的内置属性
export default new Router({
// mode: ‘history’,
base: process.env.BASE_URL,
routes: [
{
path: ‘/’,
name: ‘home’,
component: Home,
children:[
{
path: ‘about/:id’,
name: ‘about’,
component: About,
},
{
path:’children’,
name:’children’,
component:Children
},
]
},
{
path: ‘*’,
name: ‘404’,
component: NotFound,
}
]
})

学完这些，你对于 vue-router 的基本运用已经可以算是合格了，工作中的大部分用法也都接触到了，我们接下来讲解 vuex。
vuex
首先来一个小 demo 展示一下 vuex 的具体用途
// store.js
import Vue from ‘vue’
import Vuex from ‘vuex’

Vue.use(Vuex)

export default new Vuex.Store({
state: {
number:0,
},
mutations: {
ADD(state){
state.number++
},
SUB(state){
state.number–
}
},
actions: {

}
})
<!– children.vue –>
<template>
<div class=”children”>
<h1>This is an children page</h1>
<button @click=”add”>
+
</button>
{{$store.state.number}}
<button @click=”sub”>
–
</button>
</div>
</template>

Vue.use(Vuex)

export default new Vuex.Store({
state: {
number:0,
},
mutations: {
ADD(state){
state.number++
},
SUB(state){
state.number–
}
},
actions: {

},
getters:{
getNumber(state){//getter 的书写方法
return state.number + 100
}
}
})
<!– children.vue –>
<template>
<div class=”children”>
<h1>This is an children page</h1>
<button @click=”add”>
+
</button>
{{$store.state.number}}
{{$store.getters.getNumber}}
<!– getters 的基础调用方法，当然还有更高级的实战课会讲解 –>
<button @click=”sub”>
–
</button>
</div>
</template>

Vue.use(Vuex)

export default new Vuex.Store({
state: {
number:0,
},
mutations: {
ADD(state){// 我们把 state 传入就可以对 state 内的数据进行我们想要的变化，它必须按照我们想要得到的格式去变化，想要直接提交 mutations 需要使用 this.$stote.commit(‘mutations 的方法名 ’, 参数) 如果想要在 mutations 方法中传参，写法就要变成 ADD(state, 形参){…} 这样一种形式了我举个例子
state.number++
},
SUB(state){
state.number–
},
// ADDPARAM(state,param){
// if (typeof param !== ‘number’){
// param = 0
// }
// state.number = state.number + param
// } 这个方法就可以传入我们想用的参数了，相应调用的地方也需要改变
},
actions: {

},
getters:{
getNumber(state){//getter 的书写方法
return state.number + 100
}
}
})
带参数的 commit 如何使用
<!– children.vue –>
<template>
<div class=”children”>
<h1>This is an children page</h1>
<button @click=”add”>
+
</button>
{{$store.state.number}}
{{$store.getters.getNumber}}
<!– getters 的基础调用方法，当然还有更高级的实战课会讲解 –>
<button @click=”sub”>
–
</button>
</div>
</template>

actions 属性
actions 属性用法和 mutations 类似，但是 actions 我们是不可以修改 state 的需要在 actions 通过 commit 来调用 mutations 来修改数据，那么 action 的意义何在呢？处理异步事件就要用 action 来做了呀。调用方法是，this.$store.dispatch(“action 的名字 ”, 参数)
书写的方法呢我给大家展示一下
// store.js
import Vue from ‘vue’
import Vuex from ‘vuex’

Vue.use(Vuex)

export default new Vuex.Store({
state: {
number:0,
},
mutations: {
ADD(state){
state.number++
},
SUB(state){
state.number–
},
ADDPARAM(state,param){
if (typeof param !== ‘number’){
param = 0
}
state.number = state.number + param
}
},
actions: {
ASYNCADD(context,param){// 这里我们传入 context 上下文，里面包含 commit, state ,getters 这三个属性都可以通过 context 来调用到并且触发内部方法
setTimeout(function(){
context.commit(‘ADDPARAM’,param)
},1000)
}
},
getters:{
getNumber(state){//getter 的书写方法
return state.number + 100
}
}
})
action 的使用
<!– children.vue –>
<template>
<div class=”children”>
<h1>This is an children page</h1>
<button @click=”add”>
+
</button>
{{$store.state.number}}
{{$store.getters.getNumber}}
<button @click=”sub”>
–
</button>

<button @click=”actAdd”>action</button>
</div>
</template>

vuex 是不是非常简单呢, 到这里大家可能在想，如果我的项目很大我有很多的这些个方法啊，状态啊，我都写在这里不就乱了吗？没错，肯定乱了，所以 vuex 还提供了 modules 方便我们分块管理
modules
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
我们把上面的这些个代码分割出去
// store.js
import Vue from ‘vue’
import Vuex from ‘vuex’

Vue.use(Vuex)

const children = {// 因为我们是写在了 children 这个组件里面这个命名规则也好让我们知道它存在于哪里
state: {
number:0,
},
mutations: {
ADD(state){
state.number++
},
SUB(state){
state.number–
},
ADDPARAM(state,param){
if (typeof param !== ‘number’){
param = 0
}
state.number = state.number + param
}
},
actions: {
ASYNCADD(context,param){
setTimeout(function(){
context.commit(‘ADDPARAM’,param)
},1000)
}
},
getters:{
getNumber(state){
return state.number + 100
}
}
}

export default new Vuex.Store({
modules:{
children, // 这里我们把 children 传入以后还是一样可以使用我们的哪些方法，不过我们是 state 要加上 modules 名字所以我们的 children.vue 要相应修改
}
})
<!– children.vue –>
<template>
<div class=”children”>
<h1>This is an children page</h1>
<button @click=”add”>
+
</button>
{{$store.state.children.number}}
<!– 大家可以看到，这里需要加上 modules 名字才可以获取到 number 但是其余的不需要处理，所以我们开发中一般想要获取到 state 最好是通过 getter 来获取 –>
{{$store.getters.getNumber}}
<button @click=”sub”>
–
</button>

<button @click=”actAdd”>action</button>
</div>
</template>

很多时候，我们在正式使用中都会加上命名空间，也就是 modules 里面的 namespaced 属性我们让它变为 namespaced: true, 如果大家想要学习，可以去 vuex 文档学习，得益于 es6 vuex 给我们提供了 mapState, mapGetters, mapActions 和 mapMutations 这四巨头我们可以轻松使用命名空间这里不做过多讲解，实战课程中我们边用边说。
VUE 基础部分结束实战课程等待各位朋友的建议暂时决定接下来出 react