VueCli入门

0. 前言

在阅读本文之前，读者需要有一些前端基础：Html、CSS、JavaScript、Vue等。

我们在学习前端基础的过程了解到，如果使用老式的web前端开发，那么可能要产生很多页面，不利于管理。

VueCli（脚手架）项目则解决了多页面的问题，提高了编码效率、代码复用性。

本文介绍Vue脚手架的安装配置与入门。

1. Vue脚手架的安装

本文的安装以 win10 OS 为例。

1.1 安装node.js

(1) 什么是node.js

我们需要使用 node.js 帮助我们构建Vue脚手架。目前为止，我们可以先把node.js 当作一种前端项目包管理工具，我们主要使用它的npm。

至于 node.js 的详细概念与npm的深入理解、高级用法，以下附上相关链接，读者可自行查阅：

node.js是什么：node.js-百度百科

中文文档：npm中文文档

(2) 安装链接

安装:node.js官网

(3) 版本检查与npm源配置

通过上面的链接下载并安装完成node.js时，我们可以在cmd（windows终端）中输入命令来检查版本:

    npm -v

当显示出正确的版本即为成功,例如鄙人的是：

    C:\Users\xxxxx>npm -v
    6.14.10

接下来，我们配置npm源，配置为国内的源，大大提高下载效率，例如我们设置为淘宝的源：

    npm config set registry https://registry.npm.taobao.org

然后，可以输入以下命令检查源：

    npm config get registry

至此，node.js下载并配置源完成。

1.2 安装VueCli

一般一台计算机/虚拟机 安装一次就好，命令为：

    npm install -g @vue/cli

等待其自动下载即可。

至此，vuecli脚手架的安装完成。

2. 创建VueCli工程

下载完vuecli后，我们就可以创建工程了。

首先我们在本地创建一个专门存放VueCli 项目的文件夹，例如我的是：

    D:\Study\Projects_Plus\VueWorkSpace

具体路径因人而异，然后通过cmd进入该项目文件夹的目录，使用npm创建VueCli工程：

    D:\Study\Projects_Plus\VueWorkSpace>vue create projectname

注意，这里的路径、项目名称（projectname）需要根据需求或者个人具体情况而定，接着，就是创建工程的选项：

    Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

依然是根据需求而定，如果需要手动选择，则选择最后一项。

如果是选择最后一项手动配置，则：接下来还需要选择features、vue版本等配置，如下代码块所示:

根据需求选择所需的features

    Vue CLI v5.0.8
? 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, and
<enter> to proceed)
 ( ) Babel
 (*) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
>(*) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

根据需求选择vue版本：

    Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: TS, Router, Vuex
? Choose a version of Vue.js that you want to start the project with
  3.x
> 2.x

其他配置: 各种yes or no

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: TS, Router, Vuex
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Where do you prefer placing config for Babel, ESLint, etc.?
  In dedicated config files
> In package.json

选择的配置等待下载完成后，我们的VueCli工程就创建成功了。

3 VueCli工程入门

3.1 启动工程

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

启动工程的命令为:

    npm run serve

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

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

    vue -V

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

    npm list vue

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

    vue ui

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

3.2 项目结构

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

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

简单介绍一下：

包/文件	作用
node_modules	当前项目依赖，git默认忽略，需要执行npm install命令下载或更新
public	当前项目启动后的根路径，可存放css、图片等文件，自带favicon.ico 和 index.html
assets	资源文件夹，存放静态资源
compinents	用于存放可复用的视图组件
router	路由配置文件
store	存储共享变量的文件
views	用于存放视图组件，默认自带HomeView.vue 和 AboutView.vue
App.vue	index.html默认加载的视图文件
main.js	当前项目的主JS文件，通常用于配置管理
其它文件	剩余的文件是一些通常的配置文件、许可协议、说明文件等，开发过程中一般不需要过多关心

4 开发入门

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

4.1 视图文件.vue

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

例如,默认的App.vue:

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

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

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

其中， 标签用于设计页面，它的直接子标签有且只有一个，如上述例子，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

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

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

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

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

（1）普通路由配置

我们直接上例子：

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

LoginView.vue:

    <template>
  <h1>这是登录页面</h1>
</template>

<script>
export default {
  name: "LoginView"
}
</script>

<style scoped>

</style>

App.vue 添加router跳转标签：

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/login">Login</router-link>
    </nav>
    <router-view/>
  </div>
</template>

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')
  }
]

（2）嵌套路由

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

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

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

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

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

    const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    children:[
      {
        path: '/about',
        component: () => import('../views/AboutView.vue')
      }
    ]
  }

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

<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>

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

（3）路由守卫

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

路由守卫

4.3 第三方依赖

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

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

（1）通过vue ui 配置

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

首先需要通过npm安装axios

    npm i axios -S

然后，在main.js添加配置

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

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

element ui :

    <!--terminal npm 命令-->
    npm i element-ui -S
    <!--mian.js配置-->
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    
    Vue.use(ElementUI)

vant :

    <!--terminal npm 命令-->
    npm i vant -S
    <!--mian.js配置-->
    import Vue from 'vue'
    import Vant from 'vant'
    import 'vant/lib/index.css'

    Vue.use(Vant)