Vue 的基本認(rèn)識(shí)
官網(wǎng)：
英文官網(wǎng): https://vuejs.org/
中文官網(wǎng): https://cn.vuejs.org/
介紹描述
漸進(jìn)式 JavaScript 框架
作者: 尤雨溪(一位華裔前 Google 工程師)
作用: 動(dòng)態(tài)構(gòu)建用戶界面
Vue 的特點(diǎn)
遵循 MVVM 模式
編碼簡潔, 體積小, 運(yùn)行效率高, 適合移動(dòng)/PC 端開發(fā)
它本身只關(guān)注 UI, 可以輕松引入 vue 插件或其它第三方庫開發(fā)項(xiàng)目
Vue 擴(kuò)展插件
vue-cli: vue 腳手架
vue-resource(axios): ajax 請(qǐng)求
vue-router: 路由
vuex: 狀態(tài)管理
vue-lazyload: 圖片懶加載
vue-scroller: 頁面滑動(dòng)相關(guān)
mint-ui: 基于 vue 的 UI 組件庫(移動(dòng)端)
element-ui: 基于 vue 的 UI 組件庫(PC 端)
它本身只關(guān)注 UI, 可以輕松引入 vue 插件或其它第三方庫開發(fā)項(xiàng)目
Vue 的基本使用
編碼:
<div? id="app">
<input? type="text"? v-model="username">
<p>Hello,? {{username}}</p>
</div>
<script? type="text/javascript"? src="../js/vue.js"></script>
<script? type="text/javascript">
new? Vue({
el:? '#app',
data:? {
username:? 'vue'
}
})
</script>
使用 vue-cli 創(chuàng)建模板項(xiàng)目
說明:
vue-cli 是 vue 官方提供的腳手架工具
github: https://github.com/vuejs/vue-cli
作用: 從 https://github.com/vuejs-templates 下載模板項(xiàng)目
創(chuàng)建 vue 項(xiàng)目
vue -V 顯示版本2時(shí)
npm install -g vue-cli
vue init webpack vue_demo
cd vue_demo
npm install
npm run dev
訪問: http://localhost:8080/
vue -V 顯示版本3時(shí)
npm install -g @vue/cli
vue create vue_demo
cd vue_demo
npm install
npm run dev
訪問: http://localhost:8080/
? 模板項(xiàng)目的結(jié)構(gòu):
|-- build : webpack 相關(guān)的配置文件夾(基本不需要修改)
|-- dev-server.js : 通過 express 啟動(dòng)后臺(tái)服務(wù)器
|-- config: webpack 相關(guān)的配置文件夾(基本不需要修改)
|-- index.js: 指定的后臺(tái)服務(wù)的端口號(hào)和靜態(tài)資源文件夾
|-- node_modules
|-- src : 源碼文件夾
|-- components: vue 組件及其相關(guān)資源文件夾
|-- App.vue: 應(yīng)用根主組件
|-- main.js: 應(yīng)用入口 js
|-- static: 靜態(tài)資源文件夾
|-- .babelrc: babel 的配置文件
|-- .eslintignore: eslint 檢查忽略的配置
|-- .eslintrc.js: eslint 檢查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主頁面文件
|-- package.json: 應(yīng)用包配置文件
|-- README.md: 應(yīng)用描述說明的 readme 文件
項(xiàng)目的打包與發(fā)布
打包:
npm run build
發(fā)布 1:
使用靜態(tài)服務(wù)器工具包
npm install -g serve
serve dist
訪問: http://localhost:5000
發(fā)布 2: 使用動(dòng)態(tài) web 服務(wù)器(tomcat)
修改配置: webpack.prod.conf.js
output: {
publicPath: '/xxx/' //打包文件夾的名稱
}
重新打包:
npm run build
修改 dist 文件夾為項(xiàng)目名稱: xxx
將 xxx 拷貝到運(yùn)行的 tomcat 的 webapps 目錄下訪問: http://localhost:8080/xxx
ESLint
說明
ESLint 是一個(gè)代碼規(guī)范檢查工具
它定義了很多特定的規(guī)則, 一旦你的代碼違背了某一規(guī)則, eslint 會(huì)作出非常有用的提示
官網(wǎng): http://eslint.org/
基本已替代以前的 JSLint
ESLint 提供以下支持
ES
JSX
style 檢查
自定義錯(cuò)誤和提示
ESLint 提供以下幾種校驗(yàn)
語法錯(cuò)誤校驗(yàn)
不重要或丟失的標(biāo)點(diǎn)符號(hào)，如分號(hào)
沒法運(yùn)行到的代碼塊
未被使用的參數(shù)提醒
確保樣式的統(tǒng)一規(guī)則玷室，如 sass 或者 less
檢查變量的命名
