Vue2学习笔记之核心技术

一、Vue-cli工具的安装

npm i -g vue-cli

**注意：**如果安装过慢，我们可以去安装npm的淘宝镜像；

简单就是执行下面的命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

使用淘宝镜像安装vue-cli

cnpm i -g vue-cli

安装完成后使用 vue --version 或者 vue -V 查看是否安装完成。

**注意：**这里我们查看到的vue的版本是2.9.6的，如果我们想要把版本提升到3.x的版本，我们可以

cnpm i -g @vue/cli

查询相关资料发现，以下区别

二、通过vue-cli工具创建工程目录

2.1 首相进入到需要创建项目工程的目录下

2.2 开始创建工程

执行上面的命令后，我们发现会询问是否需要使用淘宝的镜像来创建工程，我们选择yes，在终端中输入y后回车。
页面跳转到这个界面

我们选择使用手动去创建工程目录，界面跳转至如下截图

截图中列表中的即为可供选择安装的内容，我们可以使用上下箭头去移动，并且可以使用空格键去选中和取消选中。

我们现在仅勾选这几个组件，然后回车。

代码校验建议选择，Airbnb或者Standard；当前我们选择Airbnb，然后回车

稍等后我们可以看到项目创建成功

2.3 运行cli工具创建的工程

**注意：**在我们执行npm run serve启动项目的时候，首先我们需要将当前的目录移动到hello-world中

2.4 使用vue ui图形化界面创建项目工程

三、vue-router简介

在界面中添加Info页面

3.1 创建Info.vue

<template>
  <div>
    hello info component
  </div>
</template>

<script>
export default {
  name: 'Info',
};
</script>

<style scoped>

</style>

3.2 router.js中添加Info的路由

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import Info from './views/Info.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/info',
      name: 'info',
      component: Info,
    },
    {
      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/About.vue'),
    },
  ],
});

3.3 在app.vue中添加Info路由文字链接