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

vue2.* (多頁面跳轉(zhuǎn))

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

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

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

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

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

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

---

命令

國際慣例

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

npm run dev 起服務(wù)

npm run build 打上線包

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

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

---

目錄結(jié)構(gòu)

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

js公用的方法/配置方法

less公用的樣式和reset.css

lib.js頁面引用的入口

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

app.vue (頁面)

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

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

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

---

其他

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

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

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

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

import Lib from "assets/lib.js";

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

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

//攔截方法
...

Vue.prototype.$axios = axios;

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

引用路徑的別稱

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

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

端口號

端口號在config/index.js中修改;

開發(fā)過程中的代理

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

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

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

---

0723模板修改

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

//