開發(fā)前準(zhǔn)備工作
Vue項(xiàng)目依賴環(huán)境
Vue項(xiàng)目開發(fā)需要基于Nodejs，請(qǐng)確保安裝Nodejs(建議安裝最新版本Nodejs)。
node -v
項(xiàng)目開發(fā)過(guò)程中，需要利用Nodejs包管理器NPM。
npm -v
安裝命令行工具
Vue.js 提供一個(gè)官方命令行工具，可用于快速搭建大型單頁(yè)應(yīng)用。
全局安裝webpack
npm install webpack -g
安裝全局的vue-cli腳手架
npm install -g @vue/cli
檢查版本
vue -V
Vue項(xiàng)目的開發(fā)流程
Vue項(xiàng)目的開發(fā)流程，如下：
- 利用命令行工具創(chuàng)建項(xiàng)目
- 項(xiàng)目開發(fā)前配置
- 項(xiàng)目開發(fā)階段
- 項(xiàng)目打包與優(yōu)化階段
- 項(xiàng)目上線
接下來(lái)我們以商城項(xiàng)目為例，項(xiàng)目目錄 my-project
1. 利用命令行工具創(chuàng)建項(xiàng)目
vue create my-project //普通的vue項(xiàng)目
或
vue ui // 圖形界面方式創(chuàng)建項(xiàng)目
或
vue init webpack my-project //創(chuàng)建一個(gè)基于”webpack”的項(xiàng)目,后面是項(xiàng)目名,
進(jìn)入項(xiàng)目配置向?qū)?，在?xiàng)目創(chuàng)建的過(guò)程中，你可以選擇項(xiàng)目需要依賴的工具如(vue-router、vuex等)。
項(xiàng)目創(chuàng)建完成，啟動(dòng)項(xiàng)目測(cè)試安裝是否成功：
cd my-project
npm run serve //運(yùn)行開發(fā)環(huán)境
運(yùn)行后，你會(huì)看到如下頁(yè)面：
2. 項(xiàng)目開發(fā)前配置
- 根據(jù)需求修改配置
- 根據(jù)需求修改目錄結(jié)構(gòu)
- 根據(jù)需求安裝自己所需的第三方依賴(如組件庫(kù)element-ui、axios、vue-filter等)
- 根據(jù)后臺(tái)提供的數(shù)據(jù)接口規(guī)范開發(fā)mock模擬接口。
- ....
3. 項(xiàng)目開發(fā)階段
根據(jù)項(xiàng)目需求開發(fā)組件、開發(fā)頁(yè)面、與后臺(tái)進(jìn)行項(xiàng)目聯(lián)調(diào)、項(xiàng)目測(cè)試。
4. 項(xiàng)目打包與優(yōu)化階段
項(xiàng)目打包測(cè)試
運(yùn)行下列命令進(jìn)行項(xiàng)目打包：
npm run build
打包完成后的，最終代碼都會(huì)生成在dist目錄中。
項(xiàng)目?jī)?yōu)化
通過(guò)下列命令查看打包分析：
npm run build --report
根據(jù)分析結(jié)果，進(jìn)行相應(yīng)優(yōu)化
5. 項(xiàng)目上線
將dist目錄中的資源，發(fā)布到線上環(huán)境。
目錄結(jié)構(gòu)
/
│
├── node_modules/ # 自動(dòng)生成，包含Node生產(chǎn)依賴以及開發(fā)依賴
│
├── public/ # 純靜態(tài)資源，不會(huì)被wabpack構(gòu)建。
│ ├── index.html # 入口頁(yè)面
│ └── favicon.ico # 網(wǎng)站站標(biāo)
│
├── src/ # 項(xiàng)目源碼目錄
│ ├── main.js # 入口js文件
│ ├── app.vue # 根組件
│ ├── components # 公共組件目錄
│ │ └── title.vue
│ ├── pages/ # 頁(yè)面目錄
│ │ ├── about.vue
│ │ └── notfound.vue
│ ├── assets/ # 資源目錄，這里的資源會(huì)被wabpack構(gòu)建
│ │ └── images/
│ │ └── logo.png
│ ├── routes/ # 前端路由
│ │ └── index.js
│ └── store/ # 應(yīng)用級(jí)數(shù)據(jù)（state）
│ └── index.js
│
├── .gitignore # git排除文件
│
├── babel.config.js
│
├── vue.config.js # vue配置文件
│
├── package.json # npm包配置文件，里面定義了項(xiàng)目的npm腳本，依賴包等信息
│
└── README.md
目錄介紹
| 文件 | 類型 | 描述 |
|---|---|---|
| src | 目錄 | 存放開發(fā)文件目錄 |
| src/main.js | 文件 | 入口文件 |
| src/router | 目錄 | 存放路由目錄 |
| src/components | 目錄 | 存放項(xiàng)目組件(.vue)目錄 |
| src/App.vue | 文件 | App.vue文件，這是Vue自己的文件類型，在Vue中，官網(wǎng)叫它做組件，單頁(yè)面的意思是結(jié)構(gòu)，樣式，邏輯代碼都寫在同一個(gè)文件中，當(dāng)我們引入這個(gè)文件后，就相當(dāng)于引入對(duì)應(yīng)的結(jié)構(gòu)、樣式和JS代碼 |
| src/assets | 目錄 | 存放 js、css、模板、圖片、flash 等等靜態(tài)資源文件 |
| package.json | 文件 | 配置文件，保存一些依賴信息，以及項(xiàng)目初始化配置。 |
| public | 目錄 | 靜態(tài)資源，不會(huì)被wabpack構(gòu)建 |
| public/index.html | 文件 | 網(wǎng)站首頁(yè) |
| public/favicon.ico | 文件 | 網(wǎng)站站標(biāo) |
| config | 目錄 | 項(xiàng)目配置 |
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//值為false 去掉警告 You are running Vue in development mode
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
安裝webpack，webpack-dev-server以及相關(guān)的loaders
# 全局安裝webpack，webpack-dev-server
$ npm install -g webpack
$ npm install -g webpack-dev-server
# 為項(xiàng)目安裝其他依賴
$ npm i webpack-merge css-loader style-loader file-loader url-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue vue-loader vue-html-loader vue-style-loader vue-hot-reload-api -D
webpack-merge：開發(fā)環(huán)境和生產(chǎn)環(huán)節(jié)的webpaak配置文件的配置合并
css-loader：編譯寫入css
style-loader：把編譯后的css整合進(jìn)html
file-loader：編譯寫入文件，默認(rèn)情況下生成文件的文件名是文件名與MD5哈希值的組合
vue：vue主程序
vue-loader：編譯寫入.vue文件
vue-html-loader：編譯vue的template部分
vue-style-loader：編譯vue的樣式部分
vue-hot-reload-api：webpack對(duì)vue實(shí)現(xiàn)熱替換
babel-core：ES2015編譯核心
babel-loader：編譯寫入ES2015文檔
babel-preset-es2015：ES2015語(yǔ)法
babel-preset-stage-0：開啟測(cè)試功能
babel-runtime：babel執(zhí)行環(huán)境
url-loader
項(xiàng)目配置
vue.config.js 是一個(gè)可選的配置文件，如果項(xiàng)目的 (和 package.json 同級(jí)的) 根目錄中存在這個(gè)文件，那么它會(huì)被 @vue/cli-service 自動(dòng)加載。你也可以使用 package.json 中的 vue 字段，但是注意這種寫法需要你嚴(yán)格遵照 JSON 的格式來(lái)寫。
這個(gè)文件應(yīng)該導(dǎo)出一個(gè)包含了選項(xiàng)的對(duì)象：
// vue.config.js
module.exports = {
// 選項(xiàng)...
}
配置詳解
可點(diǎn)擊訪問(wèn)官方配置詳解
module.exports = {
// 部署應(yīng)用時(shí)的基本 URL
publicPath: '/',
// 輸出文件目錄 運(yùn)行時(shí)生成的生產(chǎn)環(huán)境構(gòu)建文件的目錄(默認(rèn)'dist'，構(gòu)建之前會(huì)被清除)
outputDir: 'dist',
//放置生成的靜態(tài)資源(js、css、img、fonts)的(相對(duì)于 outputDir)目錄(默認(rèn)'')
assetsDir: '',
// eslint-loader 是否在保存的時(shí)候檢查
lintOnSave: true,
// use the full build with in-browser compiler?
// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
compiler: false,
// webpack配置
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: () => {},
configureWebpack: () => {},
// vue-loader 配置項(xiàng)
// https://vue-loader.vuejs.org/en/options.html
vueLoader: {},
// 生產(chǎn)環(huán)境是否生成 sourceMap 文件
productionSourceMap: true,
// css相關(guān)配置
css: {
// 是否使用css分離插件 ExtractTextPlugin
extract: true,
// 開啟 CSS source maps?
sourceMap: false,
// css預(yù)設(shè)器配置項(xiàng)
loaderOptions: {},
// 啟用 CSS modules for all css / pre-processor files.
modules: false
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length > 1,
// 是否啟用dll
// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
dll: false,
// PWA 插件相關(guān)配置
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// webpack-dev-server 相關(guān)配置
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: null, // 設(shè)置代理
before: app => {}
},
// 第三方插件配置
pluginOptions: {
// ...
}
}
