### Vue的js文件下載
#### 開發版本
https://cn.vuejs.org/js/vue.js
https://cdn.jsdelivr.net/npm/vue/dist/vue.js
#### 生產版本
https://cn.vuejs.org/js/vue.min.js
https://cdn.jsdelivr.net/npm/vue@2.6.11 , 這里可以帶版本號
Jsdelivr_免費公用CDN加速服務網
https://cdn.jsdelivr.net/npm/vue/
### 編譯器與運行時
其實都是JS代碼。
* 編譯器: 將模板字符串編譯為JavaScript渲染函數的代碼。
* 運行時: 創建Vue實例,渲染并處理虛擬DOM等的代碼。
* 完整版: 同時包括編譯器和運行時。
其他版本:
* UMD: Universal Module Definition, 通用模塊定義規范。其沒有自己專有的規范,是集結了 CommonJs、CMD、AMD 的規范于一身。
https://github.com/umdjs/umd
* **[CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1)**,配合老的打包工具[Browserify](http://browserify.org/)或[webpack 1](https://webpack.github.io/)
**[ES Module](http://exploringjs.com/es6/ch_modules.html)**
傳入字符串給`template`,或掛載一個元素并以其DOM內部的HTML作為模板,就需要編譯器
```
// 需要編譯器
new Vue({
template: '<div>{{ hi }}</div>'
})
```
```
// 不需要編譯器
new Vue({
render (h) {
return h('div', this.hi)
}
})
```
運行時版本比完整體積小 30%。
如果需要打包編譯器,也就是打包完整版的Vue, 對不同的打包工具需要配置一個別名:
#### webpack
```
module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 時需用 'vue/dist/vue.common.js'
}
}
}
```
#### Rollup
```
const alias = require('rollup-plugin-alias')
rollup({
// ...
plugins: [
alias({
'vue': require.resolve('vue/dist/vue.esm.js')
})
]
})
```
#### Browserify
添加到你項目的 package.json
```
{
// ...
"browser": {
"vue": "vue/dist/vue.common.js"
}
}
```
#### Parcel
在你項目的 package.json 中添加:
```
{
// ...
"alias": {
"vue" : "./node_modules/vue/dist/vue.common.js"
}
}
```
### 開發環境 Vs. 生產環境模式
* UMD, 開發環境/生產環境是硬編碼好的, 開發環境未壓縮代碼, 生產環境壓縮后的代碼
* CommonJS 和 ES Module, 自行壓縮。CommonJS 和 ES Module 版本同時保留原始的`process.env.NODE_ENV`檢測,以決定它們應該運行在什么模式下。你應該使用適當的打包工具配置來替換這些環境變量以便控制 Vue 所運行的模式。把`process.env.NODE_ENV`替換為字符串字面量同時可以讓 UglifyJS 之類的壓縮工具完全丟掉僅供開發環境的代碼塊,以減少最終的文件尺寸。
* webpack 4+
```
module.exports = {
mode: 'production'
}
```
* Rollup
```
const replace = require('rollup-plugin-replace')
rollup({
// ...
plugins: [
replace({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
}).then(...)
```
* Browserify
```
NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
```
### 命令行工具
為單頁面應用(SPA)快速搭建腳手架
### 開發調試工具
https://github.com/vuejs/vue-devtools#vue-devtools
- 引入篇
- 基礎篇
- 快速入手
- 名詞解釋
- Vue語法
- Vue安裝
- Vue實例
- 模板語法
- 計算屬性和偵聽器
- Class與Style綁定
- 條件渲染
- 列表渲染
- 事件處理
- 表單輸入綁定
- 組件基礎
- 進階篇
- 常用模塊
- 單文件組件
- 快速學會Vue Router路由
- Vue Route 進階使用
- Vuex 與狀態管理
- Axios
- Mock.js
- data數據顯示在頁面
- Vue生命周期
- Vue按需加載組件
- 國際化
- 頁面加載進度條 -NProgress
- 自定義主題顏色
- 開發篇
- Vue入門——創建并運行一個Vue項目
- Vue + Element UI 項目創建
- 使用Vue ui項目創建工具在網頁中創建Vue項目
- Vue項目創建入門實例
- Vue CLI
- 創建項目
- 使用Visual Studio Code 開發Vue項目
- 高級篇
- 組件深入
- Vue+Element
- Vue + ElementUI 主題顏色切換
- 工具篇
- 在線代碼編輯器
- 開發工具(IDE,集成開發環境)
- npm(JavaScript包管理工具)介紹
- Node.js(npm)在Windows下安裝
- webpack介紹
- webpack快速實例
- webpack
- 快速入門實例
- 安裝
- 概念
- Nodejs
- 基礎
- npm
- 命令參考
- 命令
- 模塊安裝
- Babel
- 問題解決篇
- ERROR Failed to get response from https://registry.yarnpkg.com/vue-cli-version -marker
- Vue常見問題
- You are using the runtime-only build of Vue where the template compiler is not
- yarn 報unable to get local issuer certificate
- yarn There appears to be trouble with your network connection. Retrying
- Expected Boolean, got String with value "true".
- 項目篇
- 項目創建
- 項目設計
- 頁面
- 開發問題
- 后端
- Spring Boot + Activiti 工作流框架搭建之一
- Spring Boot + Activiti 工作流框架搭建之二
- 工作流
- Java流程框架
- Activiti
- 頁面風格
- green
- blue
- orange
- 參考篇
- 好的Git項目
- Vue的在線js
- 指令
- 開發說明
- JavaScript 高級
- export和import
- JS模塊化規范對比以及在Node.js的實現
- Storage
- ES2015
- scss
- CSS、Sass、SCSS