☞ vue-cli的構建：

0.概要（精華）：

# 安裝vue-cli
npm install -g vue-cli

# 使用vue-cli初始化專案
vue init webpack my-project

# 進入到目錄
cd my-project

# 安裝依賴
npm install

# 開始執行
npm run dev

1.新建資料夾目錄。

進入D盤的work資料夾：

$ d:
$ cd: work

新建名為vueProject的資料夾、並檢視和進入：

$ mkdir vueProject
$ dir
$ cd vueProject

結果圖：

$ 
 
node -v
$ npm -v

3.安裝vue-cli腳手架工具，命令(執行要一段時間)：

 $ npm install -g vue-cli

4.新建一個vue的專案，名為vueDemo，命令（如果出現錯誤，可能是vue-cli沒有安裝好，重新安裝試試）：

  $ vue init webpack vuedemo

再根據引數名（解釋如下），選擇Y/n等。結果圖：

5.進入新建的vuedemo目錄、安裝依賴命令（需要等待一段時間，如果長時間沒有響應，就ctrl+c停止掉，然後再執行一次即可）：

$ cd vueDemo
$ npm install

結果圖：

6.開始執行，命令：

$ npm run dev

結果圖（訪問的網址）：

注意：假如8080埠被佔用，修改如下檔案中的埠號即可。

7.訪問，在瀏覽器中輸入 localhost:埠號。
結果圖：

8.用WebStrom檢視已構建的專案：

☞ 構建一個簡單的Vue導航欄選單例項

1.新建元件資料夾（pages）及檔案（index、userCenter、userInfo）：

index.vue程式碼：

<template>
  <div>
    <p>這是首頁</p>
  </div>
</template
 
>

<script>
  export default {}
</script>

<style scoped>
  p{
    display: block;
    background: #ffe87c;
  }
</style>

userCenter.vue程式碼：

<template>
  <div>
    <p>這是個人中心</p>
    <router-link to="/userCenter/userInfo">使用者資訊</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {}
</script>

<style scoped>
  p{
    display: block;
    background: #d6e9c6;
  }
</style>

userInfo.vue程式碼：

<template>
  <div>
    <p>我的名字是：阿水12344</p>
  </div>
</template>

<script>
  export default {}
</script>

<style scoped>
  p{
    display: block;
    background: #77FFFF;
  }
</style>

2.在路由配置檔案中，匯入新建的元件。（index.js我們不用了）

router.js程式碼：

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '../components/HelloWorld'
import Index from '../pages/index'
import UserCenter from '../pages/userCenter'
import UserInfo from '../pages/UserInfo'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/index',
      name: 'index',
      component: Index
    },
    {
      path: '/userCenter',
      name: 'userCenter',
      component: UserCenter,
      children: [
        {
          path: 'userInfo',
          name: 'userInfo',
          component: UserInfo
        }
      ]
    }
  ]
})

3.在專案入口App.vue中建立導航欄，程式碼如下：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <p>這可以看做是導航欄</p>
    <router-link to="/index">首頁</router-link>
    <router-link to="/userCenter">個人中心</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

4.修改mian.js
將

import router from './router'

改為：

import router from './router/router.js'

main.js程式碼：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router/router.js'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

其他文章連結：