一 環(huán)境安裝:
1 安裝nodejs http://nodejs.cn/download/下載安裝
2 安裝git https://git-for-windows.github.io/下載安裝
3 設(shè)置npm全局路徑 NodeJs下建立"node_global"及"node_cache"兩個文件夾
npm config set cache "D:\nodejs\node_cache" npm config set prefix "D:\nodejs\node_global"
4 最后在nodejs的安裝目錄中找到node_modules\npm.npmrc文件 修改如下即可:
prefix = D:\nodejs\node_global cache = D:\nodejs\node_global 5 設(shè)置node環(huán)境變量
變量名:NODE_PATH
值:D:\nodejs\node_global\node_modules
變量名:PATH
值:D:\nodejs\node_global
5 設(shè)置淘寶鏡像:
npm config set registry " https://registry.npm.taobao.org "
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.0的主要功能
全局統(tǒng)一使用的模塊util.js庫
支持字體圖標(biāo)
構(gòu)建時锐锣,增加對css打包的支持
提取公共模塊
多頁面可使用vue-router2路由
可自定義頁面模塊名腌闯,例如 http:// localhost:8091/views/home/list.html,views就是我們線上的模塊名雕憔,1.0版只能固定的
支持二級目錄姿骏,便于歸類,1.0版本暫時僅支持一級目錄
模塊下靜態(tài)文件可直接調(diào)用
發(fā)送ajax請求斤彼,使用axios庫分瘦,簡單封裝了一個庫,為了減少學(xué)習(xí)成本琉苇,封裝參數(shù)基本與JQ ajax一致嘲玫,如果不需要可直接刪除
整合了vue最流行的UI框架,vuxui2.x并扇,github star 已接近8K了去团,組件非常全面,并且作者一直有維護,從0.x版本我就開始有使用了土陪,具體了解更多昼汗,請訪問官網(wǎng) https://vux.li
基于webpack2,更高的構(gòu)建速度鬼雀,包體積更小顷窒,全面支持ES6 Modules
熱更新,效率提升神器呀
支持Lesscss預(yù)處理
獲取多頁面的url參數(shù)的方法
全局注冊vue全局過濾器的方法
安裝依賴
npm install
調(diào)試環(huán)境 serve with hot reload at localhost:8091
npm run dev
生產(chǎn)環(huán)境 build for production with minification
npm run build
本地默認(rèn)訪問端口為8091源哩,需要更改的童鞋請到項目目錄文件config/index.js修改鞋吉。
目錄結(jié)構(gòu)
webpack
|---build
|---src
|---assets #資源
|---css/common.css #css
|---font/ #字體圖標(biāo)
|---js/global.js #項目的配置
|---components 組件
|---views #各個頁面模塊,模塊名可以自定義哦励烦!
|---home #一級目錄
|---list #二級目錄
|---list.js
|---listApp.vue
......
如果看過源碼的童鞋谓着,在*.vue
頁面里,都統(tǒng)一import了一個文件
import Lib from 'assets/js/global';
結(jié)束言
此vue多頁面腳手架崩侠,并不局限于vux ui 框架漆魔,但現(xiàn)在的UI框架都要自己對webpack簡單配置下。
生命在于折騰却音,理想還是要有的,萬一實現(xiàn)了呢矢炼。
有問題隨時溝通討論哈系瓢!