Vue.js入門(mén)之工程目錄介紹

Vue 是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式框架，與其它大型的頁(yè)面框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類(lèi)庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。

關(guān)于Vue環(huán)境搭建的內(nèi)容，本文不再介紹，不清楚的同學(xué)可以訪問(wèn)Vue環(huán)境搭建或者查看官網(wǎng)相關(guān)內(nèi)容的介紹：

https://cn.vuejs.org/v2/guide/installation.html

初始化項(xiàng)目

首先，我們使用如下的命令創(chuàng)建一個(gè)Vue項(xiàng)目。

vue?init?webpack?項(xiàng)目名字

然后項(xiàng)目會(huì)有一些初始化的設(shè)置，該部分內(nèi)容的具體含義如下:

Target directory exists. Continue? (Y/n) ：直接回車(chē)默認(rèn)(然后會(huì)下載

vue2.0模板)；

Project name (vue-test) ：項(xiàng)目名稱(chēng)，直接回車(chē)默認(rèn)；

Project description (A Vue.js project) ：Vue項(xiàng)目描述，直接回車(chē)默認(rèn)；

Author：項(xiàng)目擁有者名稱(chēng)，直接回車(chē)默認(rèn)；

Use ESLint to lint your code? n：是否啟用eslint檢測(cè)，選擇”N”；

pick an eslint preset： 默認(rèn)Standard；

setup unit tests with karma + mocha?N：是否需要添加單元測(cè)試，選擇不需要；

setup e2e tests with Nightwatch?N：是否需要添加E2E測(cè)試，選擇不需要。

然后打開(kāi)終端，執(zhí)行“npm install”命令安裝依賴(lài)庫(kù)。

cd?項(xiàng)目名字npm?install

如果開(kāi)發(fā)中需要安裝一些額外的第三方庫(kù)，可以使用如下面的命令：

npm?install?庫(kù)名稱(chēng)?–save

然后使用下面的命令啟動(dòng)或者發(fā)布項(xiàng)目

npm?run?dev???//啟動(dòng)項(xiàng)目npm?run?build???//發(fā)布項(xiàng)目

Vue目錄結(jié)構(gòu)介紹

打開(kāi)新建的Vue項(xiàng)目，其目錄結(jié)構(gòu)如下圖所示。

在上面的文件結(jié)構(gòu)中，重點(diǎn)注意下面的內(nèi)容：

index.html文件入口；

src放置組件和入口文件；

node_modules為依賴(lài)的模塊；

config中配置了路徑端口值等；

build中配置了webpack的基本配置、開(kāi)發(fā)環(huán)境配置、生產(chǎn)環(huán)境配置等。

Vue基礎(chǔ)指令

Vue內(nèi)置了很多有用的指令，這些指令通常作用在HTML元素上以v-開(kāi)頭，可將指令視作特殊的HTML屬性（attribute）。下面就一些常用的指令給大家簡(jiǎn)單介紹下。

v-if指令

條件判斷指令，根據(jù)表達(dá)式值的真假來(lái)插入或刪除元素，表達(dá)式返回一個(gè)布爾值。語(yǔ)法規(guī)則如下：

v-if?=?"expression"

例如有下面一個(gè)實(shí)例，

運(yùn)行結(jié)果為：

yes? age:?28

v-show指令

條件渲染指令，與v-if不同的是，無(wú)論v-show的值為true或false，元素都會(huì)存在于HTML代碼中；而只有當(dāng)v-if的值為true，元素才會(huì)存在于HTML代碼中。v-show指令只是設(shè)置了元素CSS的style值，v-show指令的語(yǔ)法如下：

v-show?=?"expression"

例如：

v-else指令

可配合v-if或v-show使用，v-else指令必須緊鄰v-if或v-show，否則該命令無(wú)法正常工作。v-else綁定的元素能否渲染在HTML中，取決于前面使用的是v-if還是v-show。若前面使用的是v-if，且v-if值為true，則v-else元素不會(huì)渲染；若前面使用的是v-show，且v-show值為true，則v-else元素仍會(huì)渲染到HTML。

v-for指令

循環(huán)指令，基于一個(gè)數(shù)組渲染一個(gè)列表，與JavaScript遍歷類(lèi)似。語(yǔ)法格式如下：

v-for?=?"item?in?items"

例如，在數(shù)組todos，依次遍歷數(shù)組todos中的每個(gè)元素，將text部分顯示。

v-bind指令

v-bind用于給DOM綁定元素屬性。例如：

v-bind:argument="expression"

其中，argument通常是HTML元素的特性，如：v-bind:class=”expression”。

v-bind指令可以縮寫(xiě)為:冒號(hào)。

v-on指令

v-on用于監(jiān)聽(tīng)DOM事件，語(yǔ)法與v-bind類(lèi)似，如監(jiān)聽(tīng)點(diǎn)擊事件。

v-on:click="doSth"

其中，v-on指令可以縮寫(xiě)為@符號(hào)。如：@click=”doSth”。

附：

vue.js 官網(wǎng)：https://vuejs.org/

vue.js 中文網(wǎng)：?http://vuefe.cn/

vue-router 文檔：http://router.vuejs.org/zh-cn/index.html/

vuex 文檔：http://vuex.vuejs.org/

webpack 文檔：https://webpack.github.io/docs/

ES2015 入門(mén)教程：http://es6.ruanyifeng.com/

scss 文檔：

http://sass-lang.com/documentation/file.SASS_REFERENCE.html

mocha 文檔:?http://mochajs.org/

express 中文官網(wǎng)：http://expressjs.com/zh-cn/

本文轉(zhuǎn)載自異步社區(qū)

前端開(kāi)發(fā)

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶(hù)投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶(hù)投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。