vue-cli腳手架教程
一，基礎入門
1，安裝vue-cli
安裝vue-cli的前提是你已經安裝了npm，安裝npm你可以直接下載node的安裝包進行安裝。你可以在命令列工具裡輸入npm -v 檢測你是否安裝了npm和版本情況。
如果npm沒有問題，接下來我們可以用npm 命令安裝vue-cli了，在命令列輸入下面的命令
npm install vue-cli -g
-g :代表全域性安裝。如果你安裝時報錯，一般是網路問題，你可以嘗試用cnpm來進行安裝。安裝完成後，可以用vue -V來進行檢視 vue-cli的版本號。注意這裡的V是大寫的。
如果vue -V的命令管用了，說明已經順利的把vue-cli安裝到我們的計算機裡了。
2，初始化專案
使用命令列來初始化一個vue-cli腳手架專案（常用初始化命令如下）
vue init webpack projectname
格式
vue init <template-name> <project-name>
格式說明
init：表示我要用vue-cli來初始化專案
<template-name>：表示模板名稱，vue-cli官方為我們提供了5種模板，
- webpack-一個全面的webpack+vue-loader的模板，功能包括熱載入，linting,檢測和CSS擴充套件。
- webpack-simple-一個簡單webpack+vue-loader的模板，不包含其他功能，讓你快速的搭建vue的開發環境。
- browserify-一個全面的Browserify+vueify 的模板，功能包括熱載入，linting,單元檢測。
- browserify-simple-一個簡單Browserify+vueify的模板，不包含其他功能，讓你快速的搭建vue的開發環境。
-simple-一個最簡單的單頁應用模板。
<project-name>：標識專案名稱，這個你可以根據自己的專案來起名字。
在實際開發中，一般我們都會使用webpack這個模板。
執行命令後，會詢問我們幾個簡單的選項，我們根據自己的需要進行填寫就可以了！
- Project name :專案名稱 ，如果不需要更改直接回車就可以了。注意：這裡不能使用大寫，所以我把名稱改成了vueclitest
- Project description:專案描述，預設為A Vue.js project,直接回車，不用編寫。
- Author：作者，如果你有配置git的作者，他會讀取。
- Install vue-router? 是否安裝vue的路由外掛，我們這裡需要安裝，所以選擇Y
- Use ESLint to lint your code? 是否用ESLint來限制你的程式碼錯誤和風格。我們這裡不需要輸入n，如果你是大型團隊開發，最好是進行配置。
- setup unit tests with Karma + Mocha? 是否需要安裝單元測試工具Karma+Mocha，我們這裡不需要，所以輸入n。
- Setup e2e tests with Nightwatch?是否安裝e2e來進行使用者行為模擬測試，我們這裡不需要，所以輸入n。
然後專案就構建完成了！
- cd vuecliTest 進入我們的vue專案目錄
- npm install 裝我們的專案依賴包，也就是安裝package.json裡的包，如果你網速不好，你也可以使用cnpm來安裝
- npm run dev 發模式下執行我們的程式
3，npm run 命令的區別
npm run dev：在本地除錯，把專案在本地執行起來
npm run build：打包專案
我們在本地除錯的時候只要命令列執行npm run dev就可以把這個專案跑起來，但是現在我們要把他放到伺服器上的話用npm run build命令就可以啦。
在projectname專案目錄下執行 npm run build ，打包專案，打包完成之後，我們就可以像開啟靜態網頁一樣開啟我們完成的專案。
下圖為打包生成的dist資料夾，其中index.html為入口檔案
這時你打開了index.html檔案，發現網頁一片空白，開啟F12發現console報了幾個錯誤
這是因為引用資源的路徑問題，我們只要在下圖的地方修改一下再打包就可以了，需要修改的檔案在專案目錄下的config資料夾裡的index.js檔案中
改完，再次執行npm run build，然後開啟index.html成功訪問vue腳手架專案。
4，使用圖形化介面建立vue-cli專案
執行 vue ui 命令可以開啟 vue專案管理器（檢視介面），可以根據需求自定義建立專案，如下圖
二，開發
1，vue-cli引入axios
終端進入到vue-cli專案的根目錄，執行命令列，安裝axios（下面兩個都需要）
npm install axios
npm install --save axios vue-axios
然後在 main.js 中引入
import Vue from 'vue'
import App from './App'
import router from './router'
/* 引入axios開始 */
import vueAxios from 'vue-axios'
import axios from 'axios'
Vue.use(vueAxios,axios)
/* 引入axios結束 */
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
在 HelloWorld.vue 中修改
<template>
<div>
<!-- template內容開始（外圍必須包裹一個div，因為元件只允許有唯一的一個根元素） -->
<button v-on:click="sendRequest">傳送axios請求</button>
<div v-show="showText">
{{msg}}
</div>
<!-- template內容結束 -->
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
showText:false,
msg: ''
}
},
methods:{
sendRequest(){
// axios請求開始
this.axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response=>{
this.msg = response.data.bpi
console.log("axios請求成功");
})
.catch(function (error) {
console.log(error)
})
// axios請求結束
this.showText=true
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<!-- style加上scoped表示此css樣式只在本模組中有效 -->
<style scoped>
</style>
npm run dev啟動本地專案，http://localhost:8080進入專案首頁
點選按鈕傳送axios請求回顯到msg中
2，export default 和 export
- Vue 是通過 webpack 實現的模組化，因此可以使用 import 來引入模組
- export 用來匯出模組，Vue 的單檔案元件通常需要匯出一個物件，這個物件是 Vue 例項的選項物件，以便於在其它地方可以使用 import 引入。而 new Vue() 相當於一個建構函式，在入口檔案 main.js 構造根元件的同時，如果根元件還包含其它子元件，那麼 Vue 會通過引入的選項物件構造其對應的 Vue 例項，最終形成一棵元件樹。
export 和export default 的區別在於：export 可以匯出多個命名模組，例如
//demo1.js
export const str = 'hello world'
export function f(a){
return a+1
}
對應的引入方式
//demo2.js
import { str, f } from 'demo1'
export default 只能匯出一個預設模組，這個模組可以匿名，例如
//demo1.js
export default {
a: 'hello',
b: 'world'
}
對應的引入方式
//demo2.js
import obj from 'demo1'
引入的時候可以給這個模組取任意名字，例如 "obj"，且不需要用大括號括起來。
3，vue-cli引入vue-router路由
（1）在package.json檔案中的dependencies中新增路由及其版本，如果有的話可以忽略。
"dependencies": {
"axios": "^0.20.0",
"vue": "^2.5.2",
"vue-axios": "^2.1.5",
"vue-router": "^3.4.3"
}
（2）npm安裝
npm install vue-router --save
（3）在index.js路由檔案中引入路由
import Router from 'vue-router'
Vue.use(Router)
（4）在src/components資料夾下新建test.vue等元件，然後再index.js路由檔案中進行配置元件
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path:'/test',
name:'test',
component:test
},
{
path:'/test2',
name:'test2',
component:test2
}
]
① 經典路由案例
App.vue是腳手架的入口頁面，新增路由連結
/test 和 /test2 就是上面配置好的元件
<template>
<div id="app">
<router-link to="/test">test頁面</router-link>
<router-link to="/test2">test222頁面</router-link>
<router-view/> <!-- 匹配到的路由元件會顯示到router-view容器中 -->
</div>
</template>
效果：點選兩個選單，路由到不同的頁面中
4，vue-cli跳轉頁面的方式
① router-link標籤跳轉
<router-link to='/citylist'><div class="header-right">城市</div></router-link>
<router-link :to="{path:'/partysubject',query:{id:3}}">城市</router-link>
② js方法跳轉
<button @click = "func()">跳轉</button>
<script>
export default{
methods:{
func (){
this.$router.push({name: '/order/page1',params:{ id:'1'}});
}
}
}
</script>
補充第二種方式
this.$router.push({path: ''/order/index''});
this.$router.push({path: '/order/page1',query:{ id:'2'}});
this.$router.push({name: '/order/page2',params:{ id:'6'}});
query要用path來引入，params要用name來引入，接收引數都是類似的，分別是this.$route.query.name和this.$route.params.name。
query更加類似於我們ajax中get傳參，params則類似於post，說的再簡單一點，前者在瀏覽器位址列中顯示引數，後者則不顯示
5，vue-cli引入elementui元件
（1）命令安裝elementui
npm i element-ui -S
（2）也可以在package.json中的dependencies新增依賴，然後npm install安裝
裝了elementui之後，在main.js中新增
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' //單獨引入樣式檔案
Vue.use(ElementUI)
然後就可以使用elementui元件了。
6，el-upload上傳元件上傳成功之後獲取圖片資訊
el-upload上傳元件上傳成功之後獲取圖片資訊（圖片在伺服器上的儲存路徑等相關資訊）並儲存到data中，供表單提交
<el-upload
class="upload-demo"
action="/api/lifespace/uploadImage"
name="file"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:on-success="savePic"
list-type="picture"
>
<el-button size="small" type="primary">點選上傳</el-button>
<div slot="tip" class="el-upload__tip">只能上傳jpg/png檔案，且不超過500kb</div>
</el-upload>
使用element-ui中的上傳元件,upload,這個預設傳送post請求,
在使用upload元件自動攜帶的請求方式傳送
action->請求的url
on-success->請求傳送成功的鉤子–方法function(response, file, fileList)預設引數3個
auto-upload->是否在選取檔案後立即進行上傳,預設是true(選取檔案即上傳)
name->上傳的檔案欄位名,預設值file,後臺有時候需要傳送別的欄位名如image就這修改
data->上傳時附帶的額外引數object
disabled->是否禁用,預設false
http-request->覆蓋預設的上傳行為，可以自定義上傳的實現–方法(當請求方式不為post可以自定義方式)
uploadSuccess(response,file,fileList){
const array=response;
console.log(array)
this.picList.push(array)
}
7，vue-cli中axios跨域的問題
在config資料夾下的index.js檔案中的proxyTable欄位中，作如下處理
proxyTable: {
'/api':{
target:'http://localhost:8081',//後端地址
changeOrigin:true,
pathRewrite:{
'^/api':''
}
}
}
在具體使用axios的地方，修改url如下即可
this.axios.post('/api/lifespace/saveContent',{content:contents})
.then(response=>{
console.log(response.data);
})
.catch(function (error) {
// console.log(error)
})
8，vue-cli新增全域性js
填寫全域性config.js
function getConfig(str){
return "test";
}
//暴露的方法
//公開的方法
export default {
getConfig:getConfig,//獲取 公共配置方法
}
main.js 引入當前檔案
import getMyConfig from './assets/js/config'
Vue.prototype.$getMyConfig = getMyConfig;//引入配置檔案
這時就可以使用了，使用方法如下（獲取test字串）
var ajaxurl = this.$getMyConfig.getConfig('ajaxurl');
9，elementUI upload上傳檔案時攜帶token
前端
<template>
<el-upload action="test" :headers="importHeaders"></el-upload>
</template>
<script>
var mytoken = localStorage.getItem('token') // 要保證取到
export default {
data () {
return {
importHeaders: {token: mytoken}
}
}
}
</script>
後端
@PostMapping("/test")
public R upload(MultipartFile file, HttpServletRequest request) {
String token=request.getHeader("token");
System.out.println("獲取token==="+token);
}
10，vue-cli引入公用元件
現在components資料夾下新建一個公用元件vue檔案，寫好元件之後，在export default 中定義元件名稱name值，這是子元件
然後在父元件中引入該子元件進行使用，如下
先自定義個標籤
<top></top>
然後在script標籤中引入子元件
import Top from "./Top";
然後再export default {} 中把引入的子元件賦給自定義標籤即可
components:{
top:Top
}
11，vue-cli父元件向子元件傳值
上面第10條只是引入了子元件，但是父元件的變數是傳遞不到子元件中的，因此需要如下操作
需要傳入的變數在data中定義好，然後使用v-bind進行繫結到自定義標籤上
<top v-bind:touxiang="touxiang" v-bind:username="username"></top>
這樣父元件的變數就傳到了子元件，然後子元件使用如下方式接收，這樣在子元件中就可以使用變量了，例如：{{username}}
props:['touxiang','username']