vue-cli搭建与vue-router（路由配置）

1.Vue-cli：
Vue-cli 是专门搭建 vue 开发环境的脚手架；
vue-cli这个构建工具大大降低了webpack的使用难度，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就可以。

2.安装 Vue-cli：
（1）使用npm（需要安装node环境）全局安装webpack打开命令行工具输入：npm install webpack -g或者（npm install -g webpack）
（2）安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。

（2）安装vue-cli：npm install -global vue-cli

（3）检测是否安装成功，查看版本：vue -V

3.创建项目：
（1）vue create 自己的项目名称（完成之后会生成含有自己项目名称的文件夹，注意不能使用大写）；

（2）跳转的自己的项目文件夹中：cd 项目名称；

（3）安装所有的插件：npm install；
如果是安装具体的哪个个模块，在install 后面输入模块的名字即可。而只输入install就会按照项目的根目录下的package.json文件中依赖的模块安装（这个文件里面是不允许有任何注释的），每个使用npm管理的项目都有这个文件，是npm操作的入口文件。因为是初始项目，还没有任何模块，所以用npm install 安装所有的模块。安装完成后，目录中会多出来一个node_modules文件夹，这里放的就是所有依赖的模块。

（4）写完自己的项目之后，进行打包：npm run build（会生成一个 dist 文件夹（需要上线的文件夹），会将自己写的所有 js 文件合并在一个 build.js 中）；

注意，自己的项目文件都需要放到 src 文件夹下。
在项目开发完成之后，可以输入 npm run build 来进行打包工作。

另：
打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看。
项目上线时，只需要将 dist 文件夹放到服务器就行了。

（5）最后运行服务：npm run dev；

4.路由：

直接在vue的项目中根目录中安装 命令：vue add router（安装过程中会提示，是否在路由中使用历史模式，路由分为历史模式和hash模式）

安装完成后 配置路由:main.js
　　引入并使用 vue-router

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import HelloWorld from './components/HelloWorld.vue'
 
Vue.config.productionTip = false
 
//全局注册组件
// Vue.component("users", User);
Vue.use(VueRouter)
 
//配置路由
const router = new VueRouter({
     
  routes: [　　//当路径为/时 跳转到Home组件中
    {
      path: "/", component: Home },
  ],//路由模式为历史模式
  mode: "history"
})
 
 
/* eslint-disable no-new */
new Vue({
     
  router,
  el: '#app',
  components: {
      App },
  template: ''
})

每个.vue文件中包含三部分内容：

（1）template模板：html结构

（2）script行为：处理逻辑

（3）style样式：解决样式

相当于a标签，通过to属性指定目标地址

路由匹配到的组件将渲染在这里。

css作用域：仅在当前页面作用

Home.vue 代码如下：

<template>
  <div id="home">
    <!-- <h1>{
     {
     title}}</h1> -->
    <header-app></header-app>
    <users></users>
    <footer-app></footer-app>
  </div>
</template>
 
<script>
//局部注册组件
import Users from "./Users";
import Header from "./Header";
import Footer from "./Footer";
 
export default {
     
  name: "home",
  data() {
     
    return {
     };
  },
  components: {
     
    users: Users,
    "header-app": Header,
    "footer-app": Footer
  }
};
</script>
 
<style>
</style>