一、什麼是vue-cli
1、概念：Vue-cli是官方提供的一個腳手架，可以用來快速生成前端化的工程模闆！
2、功能：
1、統一的目錄
2、快速調試
3、單元測試
4、線上運作
二、環境安裝
1、安裝
# 安裝vue-cli
npm install vue-cli -g
2、 檢測
# 檢測安裝的vue應用
vue list
三、建立項目（該文章基于VScode開發）
1、建立一個檔案夾 vue-cli
2、建立一個基于webpack的vue應用程式（一路no下去）
vue init webpack myvue
3、完善依賴
cd myvue #進入項目
npm install #安裝所有依賴
4、運作 通路測試
npm run dev
5、目錄結構說明
1、build 和 config:webpack配置檔案，項目配置檔案
2、node_modules這個一般在開源項目中都不存在，我們拿到項目的第一步就是安裝所有的依賴（npm install）
3、src:項目的源碼目錄：（Vue項目和js代碼）
4、static:靜态資源檔案
5、babelrc:Babel配置檔案（ES6轉ES5）
6、editorconfig:編輯器的配置檔案
7、gitignore:git檔案忽略配置
8、postcssrc:css相關的配置檔案，就是導入了css的插件
9、index.html:首頁 所有的頁面都是從這裡跳轉的，實際開發中不用該檔案。
10、package.json:項目的配置檔案（名稱、版本、描述，作者、依賴、啟動腳本…）
6、src目錄
說明：src目錄就是編寫前端項目的源目錄，所有的代碼都會在這麼編寫
1、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' //vue 依賴
import App from './App' //導入元件
Vue.config.productionTip = false //關閉浏覽器控制台關于環境的提示
/* eslint-disable no-new */
//vue的核心對象
new Vue({
el: '#app', //節點
components: { App }, //元件
template: '<App/>' //模闆
})
2、App.vue 注釋說明
<!--html模闆代碼-->
<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld/>
</div>
</template>
<script>
//js代碼 導入自己編寫的子產品
import HelloWorld from './components/HelloWorld'
//導出對象App 在其他地方導入的就可以直接使用
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<!-- css樣式： 如果沒有加scoped就是全局生效 如果加了就是目前頁面生效-->
<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>
四、标準的路由
1、項目中安裝路由
2、導入後便可在模闆化工程中使用路由
//導入路由元件
import VueRouter from 'vue-router'
//顯示的調用Vue路由
Vue.use(VueRouter)
五、編寫測試
1、清空項目多餘内容
2、定義路由元件
1、在components目錄下建立路由元件
2、編寫路由元件（首頁，内容頁，新聞頁）（同理建立其他兩個）
<template>
<div>
<h1>首頁</h1>
</div>
</template>
<script>
export default {
name:'Main'
}
</script>
<style>
</style>
3、編寫安裝路由
1、定義router目錄 建立index.js
//導入vue
import Vue from 'vue'
//導入vue-router
import VueRouter from 'vue-router'
//使用VueRouter
Vue.use(VueRouter)
//導入自定義的元件
import Content from '../components/Content'
import Main from '../components/Main'
import News from '../components/News'
import NotFond from '../components/NotFond.vue'
//配置路由
export default new VueRouter({
mode:'history',//控制通路路徑中有沒有#
routes:[
//規則1:首頁
{
path:'/main',
name:'main',
component:Main
},
//規則2:内容頁
{
path:'/content',
name:'content',
component:Content
},
//規則3:新聞頁
{
path:'/news',
name:'news',
component:News
},
{//關于404:優先比對精準的 再比對通用的
path:'*',
component:NotFond
}
]
})
4、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' //vue 依賴
import App from './App' //導入元件
Vue.config.productionTip = false //關閉浏覽器控制台關于環境的提示
//導入我們的路由規則 自動識别index.js
import router from './router'
/* eslint-disable no-new */
//vue的核心對象
new Vue({
el: '#app', //節點
router, //挂載路由
components: { App }, //元件
template: '<App/>' //模闆
})
5、App.vue中使用
// 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' //vue 依賴
import App from './App' //導入元件
Vue.config.productionTip = false //關閉浏覽器控制台關于環境的提示
//導入我們的路由規則 自動識别index.js
import router from './router'
/* eslint-disable no-new */
//vue的核心對象
new Vue({
el: '#app', //節點
router, //挂載路由
components: { App }, //元件
template: '<App/>' //模闆
})
6、關于404路由配置:優先比對精準的 再比對通用的
//關于404:優先比對精準的 再比對通用的
{
path:'*',
component:NotFond
}
7、路由模式 mode
1、hash:預設是hash 路徑會帶#
2、history:不帶#，也就是常看到的網頁路由
8、測試