摘要：多頁(yè)面跳轉(zhuǎn)之前看過(guò)有相關(guān)朋友了空的多頁(yè)面腳手架不過(guò)了幾個(gè)都是或者的剛好項(xiàng)目需要用到就在的基礎(chǔ)上進(jìn)行了修改已經(jīng)有直接用即可如果需要修改配置的請(qǐng)到里面修改并且全局引了如果不需要或者不喜歡請(qǐng)到里面修改多頁(yè)面空腳手架鏈接如果需要路由版的在的另外一

@[vue2.3.3|webpack2.6.1|less|axios]

之前看過(guò)有相關(guān)朋友share了空的多頁(yè)面腳手架. 不過(guò)down了幾個(gè)都是webpack1.0或者vue1.0的.

剛好項(xiàng)目需要用到vue. 就在vue-cli的基礎(chǔ)上進(jìn)行了修改

已經(jīng)有babel直接用es6即可,如果需要修改配置的請(qǐng)到 .babelrc里面修改

并且全局引了JQ(如果不需要或者不喜歡 請(qǐng)到base.conf.js里面修改)

多頁(yè)面空腳手架鏈接 如果需要路由版的在github的另外一個(gè)文件夾里

國(guó)際慣例

npm install (or cnpm 其他) 裝依賴(lài)包

npm run dev 起服務(wù)

npm run build 打上線(xiàn)包

跑起來(lái)服務(wù)后,需要在url輸入才可顯示具體頁(yè)面 /module/*.html (*為對(duì)應(yīng)文件夾名字)

添加了新文件夾后,需要重新 npm run dev一下

1.build/config: 一系列配置文件
2.src: 頁(yè)面文件
3.(src)assets:

js公用的方法/配置方法

less公用的樣式和reset.css

lib.js頁(yè)面引用的入口

4.(src)components: 復(fù)用的組件
5.(src)module: 相關(guān)的頁(yè)面 (每個(gè)文件夾表示一個(gè)頁(yè)面)

app.vue (頁(yè)面)

*.html (頁(yè)面的入口,需要和文件夾名稱(chēng)一致)

*.js (頁(yè)面的js入口,需要和文件夾名稱(chēng)一致)

在static文件夾中的tpl有模板直接復(fù)制就ok

設(shè)置了webpack啟動(dòng)進(jìn)行跳轉(zhuǎn)

在build/dev-server.js中可以進(jìn)行配置(默認(rèn)的為localhost:端口號(hào))

// var uri = "http://localhost:" + port
// 修改啟動(dòng)后的跳轉(zhuǎn)的地址
var uri = "http://localhost:" + port + "/module/template.html"

模板中的app.vue引入了公用的樣式,配置和方法

import Lib from "assets/lib.js";

在assets/conf.js中配置了axios請(qǐng)求攔截.已經(jīng)全局引入axios(使用this.$axios進(jìn)行請(qǐng)求)
有需要的話(huà).具體的配置請(qǐng)到conf.js中進(jìn)行增加

import Vue from "vue";
import axios from "axios";

//攔截方法
...

Vue.prototype.$axios = axios;

在assets/common.js中配置了一些公用的方法.有需要增加的請(qǐng)自行添加

引用路徑的別稱(chēng)

開(kāi)發(fā)過(guò)程中需要import各種東西,為了減少寫(xiě)的路徑地址.在build/webpack.base.conf.js中的alias進(jìn)行了一系列的配置

new webpack.ProvidePlugin 這一部分是給項(xiàng)目全局引入的內(nèi)容

端口號(hào)

端口號(hào)在config/index.js中修改;

開(kāi)發(fā)過(guò)程中的代理

請(qǐng)到config文件夾中的 index.js中 proxyTable進(jìn)行修改
具體請(qǐng)參考此 github鏈接

/*
param:
*:   表示掛代理時(shí),識(shí)別的請(qǐng)求前綴
url: 表示代理的地址
*/
"/*": {
    target: "url",
    changeOrigin: true,
    pathRewrite: {
        "^/*": "/*"
    }
}

本人也還正在學(xué)習(xí)中,剛好想著搭一個(gè)空的架子以備日后使用.其中有部分vue-cli生成的語(yǔ)句暫時(shí)還不太明白,希望能幫到有需要的或者不給大家挖坑.互相學(xué)習(xí)

0723模板修改

style標(biāo)簽中 區(qū)分獨(dú)立樣式的標(biāo)識(shí)打錯(cuò)了.導(dǎo)致組件的樣式互相影響了  - -

//