Vue脚手架（快速搭建Vue工程）

Vue脚手架（快速搭建Vue工程）

脚手架，即 预先定义好的目录结构及基础代码。而Vue的脚手架是Vue-cli，脚手架能帮助我们快速生成一个Vue的项目模板。

他的主要功能如下：

• 统一的目录结构
• 本地调试
• 热部署
• 单元测试
• 集成打包上线

环境准备：node.js(>=6.x，首选8.x) + git

然后我们就可以下载我们的vue-cli了。在cmd中输入：(-g表示全局安装，也就是global的缩写），npm记得设置淘宝的镜像源，会比较快。

npm配置淘宝镜像源

查看自己是否已经设置了淘宝的镜像源，请在cmd输入：

npm get registry

如果显示结果如上，那么就说明已经设置过了，如果不是，那么请使用以下语句进行配置：

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

下载各种工具包

1、@vue/cli

配置完成后，我们就可以使用以下命令安装我们的脚手架了。

指定版本
npm i -g @vue/cli@版本号
不指定版本
npm install -g @vue/cli

如果需要更新vue/cli，那么使用以下命令：

npm update -g @vue/cli

2、webpack

然后，我们下载我们的webpack，如下：

npm i webpack webpack-cli -g

初步搭建项目

都下载好后就可以用脚手架直接搭建项目了。使用命令：

vue init webpack [项目名]

这里，他问的是
1、项目名叫myproject可好（直接回车，需要改名就输入要改的名）
2、项目描述是A Vue.js project（直接回车，需要改描述就输入描述）
3、作者（可以输，也可以不输）
4、Vue的创建（直接回车，选择单机版）
5、是否下载Vue-router等等（根据自己的情况下，我一般选择否，然后根据自己想要的版本号再自己下）
6、最后一个选Yes，use NPM即可。

等项目创建完成后，他会告诉我们运行这两条指令来运行我们的vue项目。

cd [刚才webpack后面接的项目名]
npm run dev

照做就完了。

然后，我们就可以登陆我们的 http://localhost:8080 看一下是否搭建成功了。
如果看到这个就说明成功了。

接下来就是删除操作了，把不需要的组件（例如里面的HelloWorld）删掉，然后就是一个几乎干净的Vue工程了。

下载router

注意：因为是后来添加的内容，所以项目名跟上面会不一样。
注意：因为是后来添加的内容，所以项目名跟上面会不一样。
注意：因为是后来添加的内容，所以项目名跟上面会不一样。

进入我们的项目后，使用以下命令下载我们的Router。

npm i vue-router --save-dev

如果出现类似以下这种bug，那么就说明他预给你安装的router版本跟你自己的Vue版本不兼容。

这个时候，我们就得自己指定我们的router版本了。可以用@指定版本，如下：

npm i vue-router@3.5.2 --save-dev

控制台没有报错就说明安装成功了。

试一下Router

我们首先创建一个views目录，然后写一个Login组件（Login.vue），代码如下：

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

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

<style scoped>

</style>

然后我们创建router目录，然后新建一个router.js文件来配置我们导向Login组件的路由。

import Vue from 'vue'
//导入路由
import Router from 'vue-router'
//导入登录页
import Login from '../views/Login'

//使用路由
Vue.use(Router);

export default new Router({
  routes:[
  	//重定向到/login
    {
      path: '/',
      redirect: '/login'
    },
    //登錄頁
    {
      //通过/login访问
      path:'/login',
      //路由名
      name:'Login',
      //使用的组件是我们导入的Login
      component:Login
    }
  ]
})

之后，在我们的main.js中引入我们自定义的router.js文件：

import Vue from 'vue'
import App from './App'
import VueRouter from "vue-router";
import router from "./router/router";

Vue.use(VueRouter)

Vue.config.productionTip = false

new Vue({
  el: '#app',
  render: h => h(App),
  router
})

还没完，最后切记要在App.vue里面添加<router-view>标签。如下：

<template>
  <router-view></router-view>
</template>

<script>

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

<style>

</style>

此时启动我们的项目，访问 http://localhost:8080，我们会看到我们的 登录页面如下，那么就说明router的引入已经成功了。