VueCli入门

3 VueCli工程入门

3.1 启动工程

工程创建完成后，我们可以在文件夹中找到该项目，然后可以使用IDE打开，例如IDEA、VSCode等。

启动工程的命令为:

    npm run serve
1

新项目启动图片如图所示：

我们还可以使用vue 自带的可视化工具进行项目的配置与管理，前提是我们的 vuecli 版本是3以上：
查看vuecli 版本：

    vue -V
1

注意，这里的vue版本指的是脚手架的版本，而不是vue的版本，查看vue版本命令为：

    npm list vue
1

启动vue ui 可视化管理工具：

    vue ui
1

接着，就可以在vue ui 里对项目进行配置、启动、关闭等，vue ui 的截图如图所示：

3.2 项目结构

我们了解了项目的基本启动与配置方法后，接着来学习VueCli项目的结构：

总的项目包结构如图所示：

简单介绍一下：

4 开发入门

在项目安装、配置完成、了解了基本项目结构后，我们就可以动手入门开发了。

4.1 视图文件.vue

在VueCli工程中，视图文件是显示具体内容的文件，它由、

例如,默认的App.vue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

其中， 标签用于设计页面，它的直接子标签有且只有一个，如上述例子，template 中 只能有1个直接的div，后续开发均需要在div内进行。

剩余两个标签大家都很熟悉了，分别用于写css 和 js。

4.2 路由配置

首先，我们来查看一下工程默认的路由配置，并作进一步的学习：

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    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/AboutView.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

详解：
path: 跳转目标路径，必须唯一。

name: 提高可读性，可以不写。

component：后面直接跟文件路径为默认加载，后面跟箭头函数则为懒加载。一般在开发中，我们将主页设置成唯一的默认加载，其余页面为懒加载。

import:导入包括默认加载在内的组件，懒加载的视图不需要导入。

（1）普通路由配置

我们直接上例子：

在刚创建的工程添加登录页面的demo：

LoginView.vue:

    




1
2
3
4
5
6
7
8
9
10
11
12
13

App.vue 添加router跳转标签：

1
2
3
4
5
6
7
8
9
10

router的 index.js中添加路由配置

    const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    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/AboutView.vue')
  },
  {
    path: '/login',
    component: ()=> import('../views/LoginView')
  }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

（2）嵌套路由

嵌套路由提供了一套更好代码复用方式。例如我们某些页面重复部分比较多，仅份元素在页面跳转的时候发生改变，那么我们可以使用嵌套路由。

嵌套路由顾名思义，则是在路由中嵌套路由，使用children实现，下面举个简单例子：

先简单将App.vue 保留只剩一个router-view

1
2
3
4
5

在router文件夹中 的 index.js 配置嵌套路由：

    const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    children:[
      {
        path: '/about',
        component: () => import('../views/AboutView.vue')
      }
    ]
  }
1
2
3
4
5
6
7
8
9
10
11
12

最后，在需要改变的页面部分使用标签：

<template>
  <div class="home">
    <h1>HomeVue，项目主页面</h1>
    <router-view/>
    <!--以下是不变的-->
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="search">逛</van-tabbar-item>
      <van-tabbar-item icon="friends-o">购物车</van-tabbar-item>
      <van-tabbar-item icon="manager">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13

启动项目后，通过router配置的路径访问测试即可。

（3）路由守卫

路由守卫的知识点相对前面介绍的相对进阶一些，这里先引用文档链接，读者可自行查阅了解。

路由守卫

4.3 第三方依赖

如果我们要在项目中使用第三方组件库、axios等，就需要配置依赖。

例如，我们要使用axios进行异步请求,就需要先配置axios依赖，配置方式有两种：

（1）通过vue ui 配置

（2）通过终端npm 命令配置

首先需要通过npm安装axios

    npm i axios -S
1

然后，在main.js添加配置

    import axios from 'axios'
    Vue.prototype.axios = axios
1
2

（3）其它常用组件库的配置

element ui :

    
    npm i element-ui -S
    
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    
    Vue.use(ElementUI)
1
2
3
4
5
6
7

vant :

    
    npm i vant -S
    
    import Vue from 'vue'
    import Vant from 'vant'
    import 'vant/lib/index.css'

    Vue.use(Vant)
1
2
3
4
5
6
7
8