Vue脚手架

在没有Vue脚手架的时候，我们需要手动搭建webpack项目、手动去配置vue，现在有了Vue脚手架，我们就可以通过命令行的形式快速生成vue项目的基础架构。其官网地址为： https://cli.vuejs.org/zh/

安装 3.x 版本的 Vue 脚手架。

输入 vue -V 如果出现版本号，就说明安装成功。

脚手架安装成功之后，就可以通过脚手架创建vue项目了。

通过上面脚手架创建的Vue项目，使用 npm run serve 命令之后，打印如下：

使用 npm run serve 命令并不会自动打开浏览器，下面我们修改端口号，并且让执行命令之后自动打开浏览器。

注意： 不推荐使用这种配置方式。因为 package.json 主要用来管理包的配置信息，为了方便维护，推荐将 vue 脚手架相关的配置，单独定义到 vue.config.js 配置文件中。

总结 ：至此，使用脚手架创建项目的流程就完成了，如果想要把项目拷贝给别人，需要先把项目的 node_modules 文件夹删除，对方拿到项目之后，首先要cd到项目目录，然后执行 npm install 安装所有依赖项，然后再执行 npm run serve 就可以把厅脊项目跑起来了。如果想要再给项目添加新的依橡型赖扮如渗，可以cd到项目目录，然后执行 vue ui 打开GUI，在可视化面板中就可以给项目添加新的依赖了。

打开文件夹在路径栏里面输入cmd 打开cmd命令行

输入vue create router-pro

选择银仿下面选项

按下键选择路由并回车：

选择vue2版本

问你是否使用路由的历史模式：

输入n

问你eslint的语法规范选择哪种？

我们选择第一个最基本的格式校验

下面问你什么时候校验语法规范？

我们选择保存的时候校验选择第一个

问是否采用最基本的校验更新到package文件？

默认选择第一个回车

问你是否配置好了？输入y

还会跳出一个选项你可以输入y 回车 也可以直接回车

/* 导入Vue构造基迟函数 */

import Vue from 'vue'

/* 导入路由VueRouter构造函数 */

import VueRouter from 'vue-router'

/* 导入HomeView页面 */

import HomeView from '../views/HomeView.vue'

//调用构造函数Vue的use方法 传入VueRouter构造函数

//作用是把VueRouter作为一个插件 全局插入到Vue中

Vue.use(VueRouter)

/* 定义一个路由数组对象 */

const routes = [

  /* 一个对象就对应了一个路由

  path就是路由的地址

  name给路由起的名字

  component 具体跳转的页面

  */

  {

    /* path: '/' 根页面,表示已进入就显示的页面 */

    path: '/',

    name: 'home',

    /* 这种方式一进入页搏搏李面就会全部加载,不是用到的时候再加载

       性能没有懒加载的方式好 */

    component: HomeView,

    /* 可以使用redirect 重定向 已进入主页就展示第一个子页面

     redirect 后面跟的是路径名 并不是name */

     /* 因为/是根路径 所有可以直接写one */

    redirect:'one',

    children:[{

      path:'one',

      name:'one',

      component: () =>import('../views/OneView.vue')

    }]

  },

  {

    /* 这里是一级目录所以可以加/ 表示根目录 */

    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'),

    /* about不是根路径 所以redirect后面要写全 '/about/aboutchild', */

    redirect:'/about/aboutchild',

    children:[{

      path:'aboutchild',

      name:'aboutchild',

      component: () =>import('../views/AboutChild.vue')

    }]

  },

  {

    path:'/ChildA',

    name:'ChildA',

    component: () =>import('../components/ChildA.vue')

  },

  {

    /* path:'*' 必须要放最后 */

    /* path:'*' 表示上面的路由没有匹配到 则进入下面的页面 */

    path:'*',

    name:'notfound',

    component: () =>import('../components/NotFound.vue')

  }

]

/* 实例化构造函数 VueRouter 产生一个实例化对象

   并把上面的路由数组对象routes当作参数 以对象的方式传给构造函数 VueRouter*/

const router = new VueRouter({

  routes

})

/* 把实例化路由对象 router默认导出  */

export default router

/* 导入Vue构造函数 */

import Vue from 'vue'

/* 导入App.vue入口页面 */

import App from './App.vue'

/* 导入router文件夹中的index.js中的router实例化对象 */

/* 一个文件夹里面只有一个index.js文件在脚手架中可以把./router/index.js简写为./router  */

import router from './router'

/* 生产提示 */

/* 改成false是用来关闭开发者提示 */

Vue.config.productionTip = false

/* 在Vue的对象参数里面配置 el:"#app" 等于 .$mount('#app')

   都是用来挂载到id为#app的div上的*/

   /* 把路由实例化对象router配置在Vue中,作用是保证项目中

    所有的vue文件都可以使用router路由的属性和方法 */

new Vue({

  router,

  /* 会把所有vue文件渲染到App组件上 */

  render: h =>h(App)

}).$mount('#app')/* 等同于 el:"#app" */

<template>

  <div id="app">

    <nav>

      <!-- router-link 组件是负责跳转的 to属性是用来写跳转路径的

          router-link组件本质上是有a标签来实现的 路由跳转的原理是根据

          锚点来的 -->

      <router-link to="/">Home</router-link>|

      <router-link to="/about">About</router-link>|

      <router-link to="/ChildA">点我跳转ChildA</router-link>|

      <router-link to="/ChildB">点我跳转ChildB</router-link>|

    </nav>

    <!-- router-view 组件是用来展示组件的容器 -->

    <router-view/>

    <!-- 创建两个组件ChildA 和ChildB 并写两个 router-link 可以实现跳转

         组件显示在 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

}

/* .router-link-exact-active 跳转链接被激活的时候加载到router-link身上 */

nav a.router-link-exact-active {

  color: #42b983

}

</style>

<template>

  <div class="about">

    <h1>This is an about page</h1>

    <!-- to后面写的是路径 -->

    <!-- <router-link to="/about/aboutchild">我是aboutchild</router-link>-->

    <!-- to 后面要加: 作用是把后面解析成一个对象而不是字符串 -->

    <router-link :to="{name:'aboutchild'}">我是aboutchild</router-link>

    <!-- 二级路由显示的容器 -->

    <router-view></router-view>

  </div>

</template>

<template>

  <div>

      <h1>AboutChild</h1>

  </div>

</template>

<script>

export default {

}

</script>

<style>

</style>

<template>

  <div class="home">

    <h1>KW47冲冲冲</h1>

    <router-link to="/one">ONEview</router-link>

    <!-- 二级路由对应的组件容器 -->

    <router-view></router-view>

  </div>

</template>

<script>

// @ is an alias to /src

export default {

  name: 'HomeView',

  components: {

  }

}

</script>

<template>

  <div>

      <h1>我是ONEVIwe</h1>

  </div>

</template>

<script>

export default {

}

</script>

<style>

</style>

<template>

  <div>

      <h1>我是CHildA</h1>

  </div>

</template>

<script>

export default {

}

</script>

<style>

</style>

<template>

  <div>

      <h1>我是ChildB</h1>

  </div>

</template>

<script>

export default {

}

</script>

<style>

</style>

<template>

  <div>

      <h1>我是notfound</h1>

  </div>

</template>

<script>

export default {

}

</script>

<style>

</style>

---