什么是 vue-cli
vue-cli 是 vue.js 的腳手架，用它可創(chuàng)建一套vue模板料滥，可快速構(gòu)建一個(gè)vue項(xiàng)目進(jìn)而快速開發(fā)翁狐。
準(zhǔn)備工作：
安裝node穆碎，如果已經(jīng)安裝，此步可跳過绰咽。
沒辦法翻墻用谷歌的道友還是直接百度吧，關(guān)鍵詞搜node，進(jìn)入它的官網(wǎng)酬凳，英文或中文版官網(wǎng)都行，可以在首頁直接點(diǎn)擊下載遭庶，也可以去下載頁根據(jù)你的系統(tǒng)版本選擇node的版本去下載宁仔。如果以前沒玩過node或者npm，建議直接下載最新的版本峦睡，因?yàn)楹罄m(xù)有很多用npm安裝的插件對npm及node的版本有要求翎苫。
下載完之后進(jìn)行安裝，新手的話我建議你直接用它默認(rèn)的安裝路徑和配置榨了，一般是在C盤煎谍，也不會(huì)占用你C盤多少內(nèi)存，后續(xù)還能避免很多麻煩龙屉。
怎么安裝呐粘，直接百度咯，這里咱們直接跳過，node里面包含了npm事哭，所以node安裝成功了就代表npm也存在了漫雷，可以快捷鍵 Ctrl+R ，輸入cmd 打開命令行工具檢測他們的版本 npm -v 鳍咱，有版本號(hào)顯示則表示安裝成功降盹。
來吧開始創(chuàng)建項(xiàng)目
如果沒有安裝webpack ，先安裝webpack 谤辜，vue是基于webpack創(chuàng)建項(xiàng)目的蓄坏。
npm install vue-cli -g //安裝vue-cli 腳手架
vue init webpack 項(xiàng)目名 //創(chuàng)建項(xiàng)目
cd 項(xiàng)目名 //進(jìn)入項(xiàng)目根目錄
npm run dev //啟動(dòng)項(xiàng)目
項(xiàng)目結(jié)構(gòu)是這樣的：
項(xiàng)目文件介紹：
新手開發(fā)的話，build文件夾里的東西不用動(dòng)丑念。
config文件夾后期會(huì)用上涡戳，
node_modules是項(xiàng)目安裝的各種插件依賴，
src 是你寫代碼的位置
static 是放靜態(tài)文件的脯倚，比如css渔彰、img、iconfont字體文件啥的
.babelrc 是配置babel的
.editorconfig 是配置編輯器的
.eslintignore 是配置eslint規(guī)則下需要忽視的股則項(xiàng)
.eslintrc.js 是配置eslint規(guī)則的
.gitignore 是配置git 的忽略項(xiàng)
.postcssrc.js 目前不知道干啥的
index.html 主頁
new Vue({
el: '#app', //el 掛載的dom所在地推正，這個(gè)app就是
router,
components: { App },
template: '<App/>'
});
main.js 內(nèi)容如下：
// 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'
import axios from 'axios'
import FastClick from 'fastclick'
Vue.config.productionTip = false
axios.defaults.withCredentials=true
Vue.prototype.$ajax = axios
Vue.prototype.host = 'http://xxx.xxx.com' //接口base地址
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
/**
* 點(diǎn)擊延遲
*/
FastClick.attach(document.body)
App.vue 的內(nèi)容是這樣的
<template>
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
body {
margin: 0;
padding: 0;
}
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
如果開發(fā)的是手機(jī)端項(xiàng)目恍涂，需要去 index.html 文件里補(bǔ)上 meta 的其他配置項(xiàng)：
開發(fā)之前問一下運(yùn)維植榕，如果項(xiàng)目不能放服務(wù)器的根目錄下再沧，只能放在服務(wù)器的一個(gè)子目錄里（因?yàn)榉?wù)器根目錄下有項(xiàng)目，而導(dǎo)致不能放咱們的項(xiàng)目的情況）尊残，那么代碼里引用 static 文件夾里的靜態(tài)資源的路徑就不能直接這樣用：
<template>
<div>
<img src='../../static/img/xxx.png' title=''>
</div>
</template>
因?yàn)閳D片出不來炒瘸，會(huì)找不到路徑。
而要用require來引入再使用：
<template>
<div>
<img :src='defaultLogo' title=''>
</div>
</template>
<script>
export default{
data(){
return {
defaultLogo:require('../../static/img/xxx.png')
}
},
}
<script>
注意：如果項(xiàng)目的圖片等靜態(tài)資源放在了 src/assets 下寝衫，那么可以直接使用相對路徑寫 <img src='../../static/img/xxx.png' title=''> 顷扩，圖片是可以出來的，就不用 require 了竞端。
給vue單頁面應(yīng)用的每個(gè)頁面設(shè)置title
router文件夾下的兩個(gè)js文件的內(nèi)容屎即，分別如下：
index.js的：
import Vue from "vue";
import VueRouter from "vue-router";
import routesList from "./router";
Vue.use(VueRouter);
const router = new VueRouter({
mode: "history",
base:'/connection/',
routes: routesList.routes
});
//Vue單頁應(yīng)用，使用vue-router設(shè)置每個(gè)頁面的title
router.beforeEach((to, from, next) => {
/* 路由發(fā)生變化修改頁面title */
if (to.meta.title) {
document.title = to.meta.title;
}
next();
});
export default router;
router.js的
const Home = r =>
require.ensure([], () => r(require('../page/home/home.vue')), 'home');
const JoinUs = r =>
require.ensure([], () => r(require('../page/joinUs/joinUs.vue')), 'joinUs');
const routesList = {
routes: [
{
path: '/',
name: 'Home',
component: Home,
meta: {
keepAlive: true,
title: '噠噠噠噠噠' //配合router文件夾里的index.js文件配置每個(gè)頁面的title
}
},
{
path: '/Home',
name: 'Home',
component: Home,
meta: {
title: '首頁' //配合router文件夾里的index.js文件配置每個(gè)頁面的title
}
},
{
path: '/JoinUs',
name: 'JoinUs',
component: JoinUs,
meta: {
title: '加入我們'
}
}
]
};
export default routesList;
想用自己手機(jī)進(jìn)行本地調(diào)試事富？
可以，打開 config/index.js 文件乘陪，可以看到 module.exports 導(dǎo)出的對象里有兩個(gè)屬性：dev 和 build 统台，dev是配置開發(fā)環(huán)境的相關(guān)配置，build是配置生產(chǎn)環(huán)境的啡邑。
既然是本地調(diào)試贱勃，那咱們來修改dev這項(xiàng)：
修改圈出來的屬性host，之前這里的默認(rèn)值是 'localhost' ，我在改成了我自己電腦的 ip 贵扰，端口不動(dòng)仇穗，然后重新啟動(dòng) npm run dev ，這時(shí)候戚绕，控制臺(tái)就會(huì)出現(xiàn)下圖：
瀏覽器上訪問纹坐，直接按住Ctrl ，點(diǎn)擊鼠標(biāo)左鍵舞丛，即可打開耘子。
手機(jī)上訪問：復(fù)制這個(gè)鏈接，用草料二維碼生成一個(gè)二維碼球切，用微信等掃碼訪問谷誓。
項(xiàng)目開發(fā)的差不多，想放線上玩玩吨凑？ 可以捍歪，先確定：
項(xiàng)目放服務(wù)器哪個(gè)位置，是根目錄還是子目錄 鸵钝，然后打開 config/index.js 文件
可以看到：
看到圈出來的這個(gè)吧费封？ 這是默認(rèn)值，就一個(gè) /
如果蒋伦，項(xiàng)目放服務(wù)器根目錄弓摘，那么：
修改被圈出這項(xiàng)的值為 ./ ， 即： assetsPublicPath: './'
如果痕届，項(xiàng)目放服務(wù)器子目錄：
修改被圈出這項(xiàng)的值為 /服務(wù)器子目錄名字/ 韧献，比如： assetsPublicPath: '/xxx/'
然后，運(yùn)行打包命令：
npm run build //項(xiàng)目打包命令
運(yùn)行打包命令之后研叫，會(huì)出現(xiàn)一個(gè)跟 src 同級的 dist 目錄锤窑，那是打包之后的項(xiàng)目
把dist 文件夾打包發(fā)給運(yùn)維即可。
vue 單頁面應(yīng)用放服務(wù)器上之后嚷炉，用戶去訪問頁面渊啰，第一次打開，正常申屹，刷新一次绘证，就會(huì)出現(xiàn)頁面404的情況， 解決辦法如下：
轉(zhuǎn)載自 Vue 部署單頁應(yīng)用哗讥，刷新頁面 404/502 報(bào)錯(cuò)
在 Vue 項(xiàng)目中嚷那，可以選擇 hash或者 history.pushState() 實(shí)現(xiàn)路由跳轉(zhuǎn)。如果在路由中使用history模式：
export default new Router({
mode: 'history',
base: __dirname,
scrollBehavior,
routes: [index, blog, project, about, list]
})
那么杆煞，當(dāng)我們 npm run build 完成并部署到服務(wù)器后魏宽，刷新某個(gè)路由下的頁面腐泻，會(huì)出現(xiàn) 404 或者 502 錯(cuò)誤。
這是因?yàn)樗⑿马撁鏁r(shí)訪問的資源在服務(wù)端找不到队询，因?yàn)関ue-router設(shè)置的路徑不是真實(shí)存在的路徑派桩。
解決方法
簡單配置下 nginx ，讓所有路由（url）下的頁面重寫到 index.html即可：
server {
listen 80;
server_name www.fayinme.cn;
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 2;
gzip_vary off;
gzip_disabled "MSIE [1-6]";
autoindex on;
root /www/blogfront/production/current;
index index.html;
location / {
try_files $uri $uri/ @router;
index index.html;
}
location @router {
rewrite ^.*$ /index.html last;
}
注意
配置完成后蚌斩，如果刷新任意頁面（F5）都跳轉(zhuǎn)到首頁铆惑，你需要查看下 app.vue 是否包含了如下代碼：
created() {
this.$router.push('/')
}
如果有，注釋或刪除即可凳寺。
