在本機搭建vue-cli3項目

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的一些其它應用，我正在學習中，希望會對大家有所幫助