構(gòu)建一個(gè) vue 項(xiàng)目最簡(jiǎn)單的方式就是使用腳手架工具 vue-cli 。前端的三大框架都有自己的腳手架工具，其作用就是用配置好的模板迅速搭建起一個(gè)項(xiàng)目工程來(lái)，省去自己配置 webpack 配置文件的基本內(nèi)容，大大降低了初學(xué)者構(gòu)建項(xiàng)目的難度。這節(jié)我們看看如何使用 vue-cli 構(gòu)建 vue 項(xiàng)目以及對(duì)構(gòu)建項(xiàng)目的具體分析。
成都創(chuàng)新互聯(lián)公司是一家專(zhuān)注于成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)與策劃設(shè)計(jì),建平網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專(zhuān)注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專(zhuān)業(yè)建站公司;建站業(yè)務(wù)涵蓋:建平等地區(qū)。建平做網(wǎng)站價(jià)格咨詢(xún):18980820575
一、環(huán)境搭建
node 和 npm 是必不可少的，這里不再介紹。
1、安裝 vue-cli
檢查是否安裝成功：
2、構(gòu)建項(xiàng)目
$ vue init webpack hello-vue
初始化的過(guò)程中，會(huì)有一個(gè)交互式的選項(xiàng)讓你選擇項(xiàng)目的一些配置，根據(jù)項(xiàng)目需求選擇即可。為了方便后面幾篇教程的演示，可以統(tǒng)一選擇以下選項(xiàng)：
? Project name hello-vue # 項(xiàng)目名稱(chēng)
? Project description A Vue.js project # 項(xiàng)目描述
? Author Deepspace # 作者
? Vue build standalone # 運(yùn)行+編譯時(shí)
? Install vue-router? Yes # 安裝 vue-router
? Use ESLint to lint your code? Yes # 使用 ESLint 作為代碼規(guī)范
? Pick an ESLint preset Airbnb # 選擇 Airbnb 的代碼規(guī)范
? Set up unit tests Yes # 安裝單元測(cè)試
? Pick a test runner karma # 測(cè)試模塊
? Setup e2e tests with Nightwatch? Yes # 安裝 e2e 測(cè)試
? Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器，npm
構(gòu)建完成之后，會(huì)提示構(gòu)建成功信息：
# Project initialization finished!
# ========================
To get started:
cd hello-vue
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
3、啟動(dòng)項(xiàng)目
$ cd hello-vue
$ npm run dev
項(xiàng)目默認(rèn)會(huì)在 8080 端口啟動(dòng)，如果端口有占用，會(huì)自動(dòng)調(diào)整端口。打開(kāi)瀏覽器輸入：http://localhost:8080，會(huì)看到構(gòu)建的項(xiàng)目的主頁(yè)：
4、目錄結(jié)構(gòu)
使用編輯器打開(kāi)(推薦使用 VSCode)，下面具體看看目錄結(jié)構(gòu)：
package.json :
{
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
"build": "node build/build.js"
}
}在 package.json 中，根據(jù)我們?cè)跇?gòu)建項(xiàng)目的時(shí)候的選項(xiàng)，有以下幾個(gè)命令。
npm run dev ：項(xiàng)目開(kāi)發(fā)階段，項(xiàng)目啟動(dòng)的命令；npm run lint ：使用 eslint 檢查代碼格式；npm run test：?jiǎn)卧獪y(cè)試和 e2e 測(cè)試；npm run e2e : e2e 測(cè)試；npm run build：開(kāi)發(fā)完成后執(zhí)行，會(huì)把我們的源代碼編譯成最終的發(fā)布代碼，生成在項(xiàng)目根目錄中的 dist 文件夾下（初始化項(xiàng)目時(shí)不會(huì)生成）。
config： 保存一些項(xiàng)目初始化配置。
build ：里面保存一些 webpack 的初始化配置。
index.html : 是我們的首頁(yè)。index 很多時(shí)候都被預(yù)設(shè)為首頁(yè)，像 index.htm，index.php 等。
src : 保存項(xiàng)目源代碼的地方，我們下面會(huì)詳細(xì)分析該文件夾里的文件。
二、代碼分析
Vue 的核心架構(gòu)分為兩個(gè)部分：路由和組件，其實(shí) React 也是一樣的。我們?cè)谇腥胍粋€(gè)項(xiàng)目的時(shí)候，都是從這兩個(gè)點(diǎn)出發(fā)。下面我們具體看看 src 文件夾。
1、入口文件
如果我們打開(kāi)項(xiàng)目根目錄下 build 目錄中的 webpack.base.conf.js，會(huì)看到這樣的代碼(第22行)：
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
// ...
} 說(shuō)明我們的入口文件就是 src 目錄下的 main.js 文件?？纯创a：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';
import router from './router';
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '',
});看看這里面做了什么事情：
- 引入
vue 并起名叫作 Vue - 引入根目錄下的
App.vue 文件(后綴名可不要) - 引入
router 文件下的 index.js 文件(文件夾后沒(méi)有具體的文件，默認(rèn)引入的就是 index.js 文件) - 通過(guò)
new 實(shí)例化 Vue 實(shí)例 ，實(shí)例化的時(shí)候聲明了幾個(gè)屬性：
el：'#app'：意思是將所有視圖放在 id 值為 app 這個(gè) dom 元素中，也就是項(xiàng)目根目錄下的 index.html 中的那個(gè) div : components: { App }：意思是將上面引入的 App.vue 文件的內(nèi)容將以
在開(kāi)始的時(shí)候，我們并沒(méi)有介紹說(shuō) Vue 使用的是虛擬 DOM ，那么，從這里我們看出，Vue 使用的也是虛擬 DOM (和React是一樣的)。
這里對(duì)虛擬 DOM 作下簡(jiǎn)單介紹：當(dāng)我們修改應(yīng)用程序時(shí)，不會(huì)對(duì) DOM 進(jìn)行更改，而是創(chuàng)建以 JavaScript 數(shù)據(jù)結(jié)構(gòu)形式存在的 DOM 副本，然后插到文檔當(dāng)中。無(wú)論何時(shí)進(jìn)行任何更改，都將對(duì) JavaScript 數(shù)據(jù)結(jié)構(gòu)進(jìn)行更改，并將后者與原始數(shù)據(jù)結(jié)構(gòu)進(jìn)行比較（diff算法），然后將最終更改更新為真實(shí) DOM。我們都知道 DOM 是非常重的，所以虛擬 DOM 是非常省性能的。
2、App.vue
通過(guò)入口文件中做的事情，我們其實(shí)已經(jīng)知道 App.vue 的作用了：?jiǎn)雾?yè)面應(yīng)用的主組件。所有頁(yè)面都是在 App.vue 下通過(guò)路由進(jìn)行切換的。所以，我們可以理解為所有的路由（route）也是 App.vue 的子組件。我們看看代碼：
這里需要提一下：node 之所以可以識(shí)別出 *·vue 格式的文件，是因?yàn)?webpack 在編譯時(shí)將 *.vue 文件中的 html 、js 、css 都抽出來(lái)形成新的單獨(dú)文件?？赏ㄟ^(guò) npm run build 命令編譯源代碼，查看 dist 文件下的文件來(lái)驗(yàn)證。
App.vue 的內(nèi)容分為三個(gè)部分：...、
我們先從 div 包裹著 img 標(biāo)簽和 router-view 標(biāo)簽。前面提到過(guò)： App.vue 是單頁(yè)面應(yīng)用的主組件。對(duì)照著前面在瀏覽器中打開(kāi)的應(yīng)用主頁(yè)面，img 標(biāo)簽就是頁(yè)面上方的 Vue 的 logo。那下面的內(nèi)容去哪了呢？和
3、router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
},
],
});前面先引入了路由插件 vue-router，然后顯式聲明要用路由 Vue.use(Router) 。路由的配置非常地明了：給不同 path 分配不同的組件（或者頁(yè)面），參數(shù) name 只是用來(lái)識(shí)別。
當(dāng)我訪(fǎng)問(wèn)根路由 http://localhost:8080/#/ 時(shí)，App.vue 中的 HelloWorld 組件分配給我，放在了 img 標(biāo)簽的下面，打開(kāi) components 目錄下的 HelloWorld.vue 就可以看到具體內(nèi)容了。
我們?cè)诳吹綖g覽器中的 url 的時(shí)候會(huì)覺(jué)得奇怪，為什么在后面加了一個(gè) # 號(hào)呢？這是因?yàn)?vue-router 默認(rèn) hash 模式 —— 使用 URL 的 hash 來(lái)模擬一個(gè)完整的 URL，當(dāng) URL 改變時(shí)，頁(yè)面不會(huì)重新加載。詳見(jiàn)：https://router.vuejs.org/zh/guide/essentials/history-mode.html。這里可先跳過(guò)這點(diǎn)內(nèi)容。
現(xiàn)在，我們?cè)跒g覽器訪(fǎng)問(wèn) http://localhost:8080/#/vue 這個(gè)地址，會(huì)發(fā)現(xiàn)只出現(xiàn)了 Vue 的 logo。這是因?yàn)槲覀儾](méi)有配置 /vue 這個(gè)路由，找不到路由，那
到這里，我們就知道路由是如何根據(jù) url 來(lái)分配不同的組件了。配置多個(gè)路由就很簡(jiǎn)單了：
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/vue',
name: 'vue',
component: Vue
}
]
})那如果要訪(fǎng)問(wèn) http://localhost:8080/#/vue/demo 怎么辦呢？
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
},
{
path: '/about',
name: 'about',
component: About,
},
{
path: '/vue',
name: 'vue',
component: Vue,
children: [
{
path: '/demo',
component: demo,
},
{
path: '/project',
component: project,
},
],
},
],
});給路由加多一個(gè)子路由配置即可。
4、assets
用來(lái)存放一些圖片、樣式等靜態(tài)文件。
三、總結(jié)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)站欄目：vue-cli構(gòu)建vue項(xiàng)目的步驟詳解
標(biāo)題網(wǎng)址：
http://weahome.cn/article/giohog.html
重慶分公司
重慶分公司
