入門vue
一、與其他框架的比較
.......................已刪
一、為什么用vue.js
- mvvm（Model-View-ViewModel）模式框架
- 漸進(jìn)式框架
- 高效協(xié)同開發(fā)
2.常見需求及解決方案
需求 解決方案
聲明式渲染、組件系統(tǒng) vue
UI組件 ElementUI
客戶端路由 vue-router
大規(guī)模狀態(tài)管理 vuex
構(gòu)建工具 webpack
項(xiàng)目腳手架 vue-cli
數(shù)據(jù)持久化 vue-cookie
圖表 vue-echarts
百度地圖 vue-baidu-map
代碼質(zhì)量檢查 eslint-plugin-vue
…
二、開發(fā)前準(zhǔn)備
1.開發(fā)工具
推薦webstorm,或是idea。
注：idea需要安裝vuejs的插件。
2.環(huán)境搭建
安裝node環(huán)境。
安裝成功后在控制臺(tái)輸入node -V，會(huì)展示出版本號(hào)。
$ v10.11.0
3.安裝依賴
安裝需要的依賴文件到node_modules文件夾。
$ npm i
4.項(xiàng)目啟動(dòng)編譯及其他操作
以****項(xiàng)目為例。
在項(xiàng)目的package.json文件中配置了項(xiàng)目操作的命令。
"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "unit": "jest --config test/unit/jest.conf.js --coverage", "test": "npm run unit", "lint": "eslint --ext .js,.vue src test/unit", "build": "node build/build.js", "dll": "webpack --config build/webpack.dll.config.js" },
eg. 啟動(dòng)項(xiàng)目對(duì)應(yīng)命令：
$ npm run dev
三、目錄結(jié)構(gòu)
family-doctor-ali項(xiàng)目目錄結(jié)構(gòu)。
build webpack開發(fā)和打包的相關(guān)設(shè)置
config 指定開發(fā)和打包中的靜態(tài)資源路徑、要壓縮的文件類型、開發(fā)使用的端口號(hào)等相關(guān)配置
dist 編譯結(jié)果文件
node_modules 依賴包文件
src 項(xiàng)目主要代碼
static 靜態(tài)文件存放位置
test api測(cè)試代碼
/.babelrc babel轉(zhuǎn)換器配置文件
/.eslintignore eslint代碼檢查工具排除文件
/.eslintrc eslint代碼檢查工具配置文件
/.gitignore git上傳忽略文件
/.postcssrc.js css編譯工具配置
/index.html 入口文件
/package.json node項(xiàng)目核心配置
/package-lock.json node包版本鎖定文件
/README.md 項(xiàng)目介紹
四、基本用法
1.常用指令
（1）v-text
html中使用變量。
<span v-text="msg"></span> <!-- 等同于 --> <span>{{msg}}</span>
（2） v-if
<span v-if="isFinal">Nice</span>
判斷是否渲染元素。
（3）v-show
判斷是否顯示元素。
<span v-show="isShow">Oops</span>
（4） v-for
遍歷數(shù)組來(lái)進(jìn)行渲染。
<div :key='index' v-for="(item,index) in items"></div> <div :key='item.id' v-for="item of items"></div>
（5）v-bind
動(dòng)態(tài)綁定一個(gè)或者多個(gè)特性。
<p v-bind:class="[{'is-active':activeClass},errorClass]">message...</p>
（6）v-model
雙向數(shù)據(jù)綁定的指令。
<!-- 變量userName --> <input type="text" v-model="userName"> <span>{{userName}}</span>
（7）v-on
用于監(jiān)聽事件的指令。
<!-- 函數(shù)delete --> <button v-on:click="delete"></button>
五、常見問(wèn)題
1.vue.js能否與jQuery混用？
可以，但沒(méi)必要。jquery主要是一個(gè)簡(jiǎn)化dom操作的組件，而在vue項(xiàng)目中你不需要操作dom。 2.vue.js項(xiàng)目中常見技術(shù)問(wèn)題怎么解決？
vue中文文檔寫的很詳細(xì)，如果出現(xiàn)文檔中沒(méi)有的問(wèn)題可以去github中vue項(xiàng)目的Issues中尋找答案。 3.vue.js兼容性如何？
包括es6+、typescript、sass、less全部支持。vue項(xiàng)目一般使用webpack打包、babel翻譯，生成的代碼可以適配低版本瀏覽器。 4.vue.js對(duì)于編碼規(guī)范有什么要求？
使用eslint代碼檢查工具，編碼結(jié)束后使用命令npm run lint即可進(jìn)行規(guī)范檢查，具體的規(guī)則文檔。
浙公網(wǎng)安備 33010602011771號(hào)