基於vue-cli搭了一個多頁面應用的空腳手架

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標籤中 區分獨立樣式的標識打錯了.致使組件的樣式互相影響了 - -

//<style lang="less" scope> (scope打錯了)
<style lang="less" scoped>

經過js引入的樣式文件進行拆分(爲了更好使用mixin方法)

lib.js
//不經過js直接引入
//引入全局樣式
// import 'assets/less/reset.css';
// import 'assets/less/common.less';

1. reset.css(重置的css)
在頁面統一入口的 *.js 引入

2.common.less(公用的樣式和mixin方法)
在每一個 *.vue 的style中 引入
//@import '~assets/less/common.less';
(~前綴在style的引入路徑 配合alias使用)