這篇文章將為大家詳細(xì)講解有關(guān)vue項目構(gòu)建與實戰(zhàn)的示例分析,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)一直秉承“誠信做人,踏實做事”的原則,不欺瞞客戶,是我們最起碼的底線! 以服務(wù)為基礎(chǔ),以質(zhì)量求生存,以技術(shù)求發(fā)展,成交一個客戶多一個朋友!為您提供網(wǎng)站制作、做網(wǎng)站、成都網(wǎng)頁設(shè)計、小程序設(shè)計、成都網(wǎng)站開發(fā)、成都網(wǎng)站制作、成都軟件開發(fā)、app軟件開發(fā)是成都本地專業(yè)的網(wǎng)站建設(shè)和網(wǎng)站設(shè)計公司,等你一起來見證!
vue項目分類
首先,在構(gòu)建一個vue項目之前我們需要了解vue項目的分類,這里我主要將其分為兩類:(1)直接引入vue.js文件 (2)使用vue單文件組件
按以上兩類來看,直接引入vue.js文件就像頁面中直接引入jQuery一樣,這樣的項目存在很多缺陷,只能使用一些基礎(chǔ)的API和局限的功能,一般主要用于初級用戶和小型項目。本文主要講解第二種使用vue但文件組件構(gòu)建的vue項目。
構(gòu)建方式
構(gòu)建一個vue項目存在著多種方式,首先我們需要用到相應(yīng)的構(gòu)建工具。官方推薦的構(gòu)建工具主要有webpack和browserify,這里我更推薦大家使用webpack進行構(gòu)建。同時除了構(gòu)建工具,我們還需要用到構(gòu)建方法,比如我們可以使用vue-cli腳手架來自動生成vue項目的基礎(chǔ)目錄文件,當(dāng)然我們也可以從零開始進行自定義構(gòu)建。
vue-cli構(gòu)建
如果你使用vue-cli腳手架來構(gòu)建vue項目,那么你只需敲擊下面5行命令即可生成一個簡單的vue項目(前提安裝node.js):
npm install -g vue-cli vue init webpack my-project cd my-project npm install npm run dev
如此一個基礎(chǔ)的vue項目目錄就自動會展現(xiàn)在你面前,我們可以來看一下其自動生成的基礎(chǔ)文件:
├── build // webpack/node配置文件 │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config // 環(huán)境配置文件 │ ├── dev.env.js │ ├── index.js │ └── prod.env.js ├── node_modules // npm包文件 ├── src // 靜態(tài)資源文件 │ ├── assets │ │ └── logo.png │ ├── components │ │ └── Hello.vue │ ├── router │ │ └── index.js │ ├── App.vue │ └── main.js ├── static ├── .babelrc // babel配置文件 ├── .gitignore // gitignore忽略文件 ├── .editorconfig // 編碼風(fēng)格配置文件 ├── .postcssrc.js // postcss配置文件 ├── package.json // node包管理文件 ├── index.html // 首頁模板 ├── package.json // 包管理文件 └── README.md // 描述文件
這樣的構(gòu)建方式其實并不適用于所有項目,很多文件你的項目可能都不會用到,并且如果你對自動生成的文件一無所知,那么后期維護起來也會非常的吃力。所以這里不推薦新手使用vue-cli構(gòu)建,而是推薦大家參考vue-cli生成的文件從零開始構(gòu)建一個vue項目。
自定義構(gòu)建
相比vue-cli構(gòu)建,自定義構(gòu)建就顯得靈活得多,但是它需要你了解構(gòu)建的步驟和原理,要求也就隨之提高了。自定義構(gòu)建分為以下幾步:
文件/文件夾創(chuàng)建
package.json文件創(chuàng)建
webpack配置文件創(chuàng)建
入口文件創(chuàng)建
vue組件編寫
路由配置
1. 文件/文件夾創(chuàng)建
按照上方的圖示,我們需要從零開始創(chuàng)建以上文件和文件夾,每一個文件都有其自己的用途。
2. package.json文件
使用下方命令,我們可以快速創(chuàng)建一個package.json文件:
npm init -y
然后修改其scripts配置項,添加打包壓縮命令,并且增加dependencies依賴項,添加項目相應(yīng)依賴,這里我們主要依賴了vue和vue-router(完整package.json配置文件見最后實例源碼):
... "scripts": { "build": "rimraf dist && cross-env NODE_ENV=prod&&webpack -p --config ./webpack.config.js" }, "dependencies": { "vue": "^2.3.4", "vue-router": "^2.5.3" } ...
3. webpack配置文件
其次我們需要創(chuàng)建我們的webpack配置文件,這里和構(gòu)建其他項目不同的是,vue單文件組件需要使用vue-loader加載器進行加載,同時使用babel-loader進行ES6語法的轉(zhuǎn)換(完整 webpack 配置文件見最后實例源碼):
module.exports = { ... module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, ] }, ... }
4. 入口文件
這里我們需要編寫在webpack中配置的入口文件地址的entry.js,主要功能為掛載生成的vue實例app至id為app的DOM節(jié)點上:
// entry.js import { app } from './app.js' app.$mount('#app')
// app.js import Vue from 'vue' import App from './App.vue' import router from './router' const app = new Vue({ router, ...App }) export { app, router }
5. vue組件編寫
然后我們需要編寫一個最簡單的vue組件index.vue,將其放在views文件夾下
<template> <div>hello world!</div> </template> <script></script> <style></style>
同時我們需要編寫最外層父組件App.vue,一般像下面這樣,主要嵌套一層router-view來動態(tài)展示不同路由下的內(nèi)容:
<template> <router-view></router-view> </template> <script></script> <style></style>
6. 路由配置
在編寫完我們vue的單文件組件后,我們需要配置我們的路由文件,以便實現(xiàn)一個單頁應(yīng)用:
import Vue from 'vue' // 引入vue import Router from 'vue-router' // 引入路由 Vue.use(Router) // 注冊路由 import Index from '../views/index.vue' // 引入我們剛剛編寫的簡單的組件 export default new Router({ mode: 'hash', routes: [ { path: '/', name: 'index', component: Index, }, { path: '*', redirect: '/' }, ] })
7. 熱加載
最后我們需要實現(xiàn)一個前端熱加載的功能來實時更新我們修改后的頁面,這里我們需要安裝一個webpack-dev-server的插件,其可以為我們搭建一個本地小型的Node.js Express服務(wù)器。
安裝完成后,我們需要在package.json的scripts中配置啟動命令dev:
... "scripts": { "dev": "webpack-dev-server", "build": "rimraf dist && cross-env NODE_ENV=prod&&webpack -p --config ./webpack.config.js" } ...
上次配置的build命令用于刪除dist目錄并切換開發(fā)環(huán)境及打包壓縮代碼,而dev命令用于啟動本地服務(wù)器,生成的包只會存在于內(nèi)存中。
8. 注意事項
完成上方步驟后其實還會存在一個問題,那就是我們的部分ES6代碼無法獲得解析,這里我們還需要添加babel的配置文件.babelrc:
{ "presets": [ ["env", { "modules": false }], "stage-2" ], "plugins": ["transform-runtime"], "comments": false, "env": { "test": { "presets": ["env", "stage-2"], "plugins": [ "istanbul" ] } } }
這里我們使用了stage-2來處理ES6中對象無法使用…解構(gòu)的問題,同時使用transform-runtime來優(yōu)化我們的代碼利用率。
關(guān)于“vue項目構(gòu)建與實戰(zhàn)的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
網(wǎng)頁標(biāo)題:vue項目構(gòu)建與實戰(zhàn)的示例分析
瀏覽地址:http://muchs.cn/article26/isphcg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供響應(yīng)式網(wǎng)站、服務(wù)器托管、網(wǎng)站收錄、品牌網(wǎng)站制作、網(wǎng)站內(nèi)鏈、建站公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)