vue-cli3官方網址：

https://cli.vuejs.org/zh/

由於公司開始一個新專案，用到的是vue-cli3搭建的專案，所以自己想搭建一個專案，今天搭建的專案就是一個很簡單的專案，沒有自己配置的專案，我的目的是想把步驟記錄下來，一是當做自己的一個筆記，而是，對初學者來說，看到這些筆記會更容易上手一些，不過隨著以後用的多，我還會繼續更新進一步的東西，今天主要來記錄一下，怎麼在本機上搭建vue-cli3專案原型，其次怎麼引進vue-router，話不多說，開始！

準備工作，安裝node，安裝git，不過今天的工作沒用到git，這兩個安裝都是傻瓜式安裝，不過多記錄

1、首先在本地建一個資料夾，用來盛放專案，例如myProject

2、window鍵+r 輸入cmd  開啟終端

3、cd  到新建的資料夾     輸入命令 

npm install -g @vue/cli    這是安裝vue腳手架

4、建立一個專案

vue create my-project

5，將專案拖到編輯器，開啟終端，cd到 my-project專案   安裝一下專案依賴包

npm install

6、執行此專案

npm run serve 執行完之後 按ctrl鍵 點選 

- Local: http://localhost:8080/
- Network: http://192.168.0.113:8080/

就會彈出專案的主頁面

將頁面的內容刪除一下，方便自己網上寫內容   至此一個最原始的vue-cli3專案框架就被搭建起來了

接下來，我們會發現，vue-cli3搭建起來的專案並沒有vue-router外掛，下面記錄一下怎麼把vue-router外掛引進來

首先給一個官方的vue-router網址：https://router.vuejs.org/zh/guide/#html   裡面有許多api可以多研究一下

1、首先安裝vue-router外掛

npm install vue-router

2，在src目錄先建立一個router檔案，裡面建立一個index.js，用來配置路由

index.js裡的內容：

import Vue from 'vue' import Router from 'vue-router'        //引入vue-router import HelloWorld from '../components/HelloWorld.vue'   //引入HelloWorld頁面
Vue.use(Router)
export default new Router({ 　　routes: [ 　　　　{//設定預設路由為HelloWorld頁面 　　　　　　path: '/', 　　　　　　name: 'HelloWorld', 　　　　　　component: HelloWorld 　　　　} 　　] })

 

2、將router的配置引到專案中來，在main.js中設定 import Vue from 'vue' import App from './App.vue' import router from './router'               //將router配置引進來 Vue.config.productionTip = false
new Vue({ 　　render: h => h(App), 　　router                  //將router配置新增到vue例項 }).$mount('#app')      

3、在app.vue裡改成這樣

<template> 　　<div id="app"> 　　　　<router-view/>        //這裡將檢視加在這裡 　　</div> </template>
<script> 　　export default { 　　　　name: 'app' 　　} </script>

至此，vue-router就引到專案中來了，可以隨意的在router檔案的index.js中配置路由了

後面會有一些關於vue-cli3的一些其它應用，我正在學習中，希望會對大家有所幫助