什么是vue-cli?
vue-cli是vue.js的腳手架，用於自動生成vue.js+webpack的項目模板，創建命令如下：
vue init webpack xxx（xxx自定義項目名稱）
* 想要創建項目成功，當然不可缺少一些必要的環境，所以下面就來詳細介紹安裝環境步驟
安裝vue-cli
打開命令運行npm install -g vue-cli
安裝完成之后打開命令窗口並輸入 vue -V，如果出現相應的版本號，則說明安裝成功。
下載成功以后會有一下這幾個文件
使用腳手架vue-cli來構建項目
使用腳手架創建項目骨架
vue init webpack spa
cmd命令行窗口顯示中文亂碼，多是因為cmd命令行窗口字符編碼不匹配導致
修改cmd窗口字符編碼為UTF-8，命令行中執行：chcp 65001
切換回中文：chcp 936
這兩條命令只在當前窗口生效，重啟后恢復之前的編碼。
創建的過程中會有幾個問題：
-
Project name：項目名，默認是輸入時的那個名稱spa1，直接回車
-
Project description：項目描述，直接回車
-
Author：作者
-
Vue build：選擇題，一般選第一個 （官方推薦：Runtime + Compiler）
-
Install vue-router：是否需要vue-router，Y選擇使用，這樣生成好的項目就會有相關的路由配置文件
-
Use ESLint to lint your code：是否用ESLint來限制你的代碼錯誤和風格。N 新手就可以不用了，但實際項目中一般都會使用，這樣開發也能達到一致的語法
- Set up unit tests：是否安裝單元測試 N
- Setup e2e tests with Nightwatch?：是否安裝e2e測試 N
-
Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM
Yes, use Yarn
No, I will handle that myself（就選擇第一個）
運行完上面的命令后，我們需要將當前路徑改變到SPA這個文件夾內，然后安裝需要的模塊
此步驟可理解成：maven的web項目創建成功后，修改pom文件添加依賴
cd t224_spa #改變路徑到t224_spa文件夾下
npm install #安裝所有項目需要的npm模塊
啟動並訪問項目
- 啟動tomcat，並通過瀏覽器訪問項目
項目啟動成功后，打開瀏覽器輸入“http://localhost:8080”即可
我在瀏覽器里邊輸入我所得到的網址運行進入了項目就成功啦！：
現在我們來把項目導入我們的HBuilderX中，修改它的端口號；
一般vue-cile構建的項目默認端口8080，為了避免端口出現占用的情況，我們就要學修改端口！
config==>index.js
然后在打開命令重新啟動服務器
停止項目添加element-ui模塊
打開命令輸入先cd 到t224_spa下
然后輸入npm install element-ui -S
使用vue+elementUI創建SPA項目，一般情況下其項目結構組成如下：
Vue + ESLint + webpack + elementUI + ES6
Vue: 主要框架
ESLint: 幫助我們檢查Javascript編程時的語法錯誤，這樣在一個項目中多人開發，能達到一致的語法
Webpack: 設置代理、插件和loader處理各種文件和相關功能、打包等功能。整個項目中核心配置
elementUI: 是基於vue的一套樣式框架，里面有很多封裝好的組件樣式
ES6: 全稱ECMAScript6.0，是JavaScript的下一個版本標准，2015.06發版
好勒，到這里就vue-cile項目環境配置就ok咯，我們現在來試着用搭配好的環境玩一下路由嵌套
路由嵌套案例
在src中創建vue文件，開始玩
首先來定義第一層：
About
<template> <div class="hello"> 博主本人 </div> </template> <script> </script> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
UserInfo
<template> <div class="hello"> <router-link to="/UserDetal">個人詳情</router-link> <router-link to="/UserPwd">修改密碼</router-link> <router-view/> </div> </template> <script> </script> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
在App.vue根據跳轉頁面的div層的id去配置跳轉路徑讓他們顯示在界面上
<template> <div id="app"> <!-- <img src="./assets/logo.png"> --> <router-link to="/About">about me</router-link> <router-link to="/UserInfo">用戶信息</router-link> <router-view/> </div> </template>
然后第二層
UserDetal
<template> <div class="hello"> 用戶詳細信息 </div> </template> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
UserPwd
<template> <div class="hello"> 用戶修改密碼 </div> </template> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
最后一步
在index.js中配置所有文件路徑
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import About from '@/view/About'
import UserInfo from '@/view/UserInfo'
import UserDetal from '@/view/UserDetal'
import UserPwd from '@/view/UserPwd'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'About',
component: About
},
{
path: '/About',
name: 'About',
component: About
},
{
path: '/UserInfo',
name: 'UserInfo',
component: UserInfo,
children:[{
path: '/UserDetal',
name: 'UserDetal',
component: UserDetal
},{
path: '/UserPwd',
name: 'UserPwd',
component: UserPwd
},
]
}
]
})
效果圖：
about
userinfo
Userdetal
UserPwd
謝謝觀看！