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

vue2.* (多頁面跳轉)

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

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

剛好項目需要用到vue. 就在vue-cli的基礎上進行了修改

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

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

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

---

命令

國際慣例

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

npm run dev 起服務

npm run build 打上線包

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

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

---

目錄結構

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

js公用的方法/配置方法

less公用的樣式和reset.css

lib.js頁面引用的入口

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

app.vue (頁面)

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

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

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

---

其他

設置了webpack啟動進行跳轉

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

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

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

import Lib from "assets/lib.js";

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

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

//攔截方法
...

Vue.prototype.$axios = axios;

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

引用路徑的別稱

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

new webpack.ProvidePlugin 這一部分是給項目全局引入的內容

端口號

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

開發過程中的代理

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

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

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

---

0723模板修改

style標簽中 區分獨立樣式的標識打錯了.導致組件的樣式互相影響了  - -

//