關(guān)于vue.js
vue.js是一套構(gòu)建用戶界面的 輕型的漸進(jìn)式前端框架。它的目標(biāo)是通過盡可能簡單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。使用vue可以給你的開發(fā)帶來極致的編程體驗(yàn)。
關(guān)于vue-cli
Vue-cli是vue官方提供的一個命令行工具（vue-cli），可用于快速搭建大型單頁應(yīng)用。該工具提供開箱即用的構(gòu)建工具配置，帶來現(xiàn)代化的前端開發(fā)流程。只需一分鐘即可啟動帶熱重載、保存時靜態(tài)檢查以及可用于生產(chǎn)環(huán)境的構(gòu)建配置的項(xiàng)目。
疑問
vue-cli主要是用于構(gòu)建單頁應(yīng)用的腳手架，但是現(xiàn)實(shí)項(xiàng)目中，大部分項(xiàng)目都是多頁的，怎么樣可以很好的利用這一套官方配置呢？我在網(wǎng)上找了一下， 幾乎找不到vue多頁應(yīng)用實(shí)例，所以才有基于vue-cli生成的單頁應(yīng)用進(jìn)行改造。
代碼地址：
Github：https://github.com/breezefeng/vue-cli-multipage
使用方法
# install dependenciesnpm install# serve with hot reload at localhost:8080/module/index.htmlnpm run dev# build for production with minificationnpm run build
目錄結(jié)構(gòu)
vue-cli-multipage |---build |---config |---src |---assets |---img 圖片文件 |---css 樣式文件 |---font 字體文件 |---components 組件 |---Button.vue 按鈕組件 |---Hello.vue |---module |---index 首頁模塊 |---index.html |---index.js |---App.vue |---detail 詳情頁模塊 |---detail.html |---detail.js |---App.vue
從目錄結(jié)構(gòu)上，各種組件、頁面模塊、資源等都按類新建了文件夾，方便我們儲存文件。
其實(shí)我們所有的文件，最主要都是放在module文件夾里，以文件夾名為html的名稱。
例如：
|---index 首頁模塊 |---index.html |---index.js |---App.vue
此時我們訪問的鏈接是：http://localhost:8080/module/index.html
這里一定要注意，在module里下級文件夾里需要將html，js，vue template 都統(tǒng)一放在當(dāng)前文件夾里，當(dāng)然你也可以繼續(xù)放其他的資源，例如css、圖片、組件等，webpack會打包到當(dāng)前頁面里。
如果項(xiàng)目不需要這個頁面了，可以把這個文件夾直接刪除掉，干凈利落，干活也開心。
像以前傳統(tǒng)的開發(fā)項(xiàng)目，所有的圖片都習(xí)慣放在images里，當(dāng)項(xiàng)目有改動時，有些圖片等資源用不上了，但還占著坑位，導(dǎo)致項(xiàng)目越來越大，雖然現(xiàn)在的硬件容量大到驚人，但我們應(yīng)該還是要養(yǎng)到一個良好的習(xí)慣。
組件的使用
組件（Component）是 vue.js 最強(qiáng)大的功能之一，當(dāng)你發(fā)現(xiàn)使用組件可以減少造輪子里，你會深深的愛上它。
我們的組件都是放在components目錄下的，調(diào)用組件的方法也很簡單。
import Hello from 'components/Hello'
然后記得在*.vue注冊導(dǎo)入的組件，要不然會無法使用。
import Hello from 'components/Hello'export default { name: 'app', components: { //在這里注冊組件，不然無法使用 Hello }}構(gòu)建代碼說明
那我們使用的是vue-cli的手腳架，用過vue-cli的同學(xué)都知道構(gòu)建代碼是放在根目錄build下，vue多頁面主要修改了這三個JS文件：webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js。
/**** [webpack.base.conf.js]這里主要列出相關(guān)代碼的修改點(diǎn)，具體代碼請看build/webpack.base.conf.js*/var entries = getEntry('./src/module/**/*.js'); // 獲得入口js文件module.exports = { entry: entries, ....}function getEntry(globPath) { var entries = {}, basename, tmp, pathname; glob.sync(globPath).forEach(function (entry) { basename = path.basename(entry, path.extname(entry)); tmp = entry.split('/').splice(-3); pathname = tmp.splice(0, 1) + '/' + basename; // 正確輸出js和html的路徑 entries[pathname] = entry; }); return entries;}/**** [webpack.prod.conf.js]這里主要列出相關(guān)代碼的修改點(diǎn)，具體代碼請看build/webpack.base.prod.js*/function getEntry(globPath) { var entries = {}, basename, tmp, pathname; glob.sync(globPath).forEach(function (entry) { basename = path.basename(entry, path.extname(entry)); tmp = entry.split('/').splice(-3); pathname = tmp.splice(0, 1) + '/' + basename; // 正確輸出js和html的路徑 entries[pathname] = entry; }); return entries;}var pages = getEntry('./src/module/**/*.html');for (var pathname in pages) { // 配置生成的html文件，定義路徑等 var conf = { filename: pathname + '.html', template: pages[pathname], // 模板路徑 inject: true, // js插入位置 minify: { //removeComments: true, //collapseWhitespace: true, //removeAttributeQuotes: true }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency' }; if (pathname in module.exports.entry) { conf.chunks = ['manifest', 'vendor', pathname]; conf.hash = true; } module.exports.plugins.push(new HtmlWebpackPlugin(conf));}修改的代碼不是很多，但是卻為多頁應(yīng)用提供了強(qiáng)大的構(gòu)建支持。以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
