Vue-cli + webpack搭建vue項目環境

開發前準備工做

Vue項目依賴環境

Vue項目開發須要基於Nodejs，請確保安裝Nodejs(建議安裝最新版本Nodejs)。

node -v

項目開發過程當中，須要利用Nodejs包管理器NPM。

npm -v

安裝命令行工具

Vue.js 提供一個官方命令行工具，可用於快速搭建大型單頁應用。

全局安裝webpack

npm install webpack -g

安裝全局的vue-cli腳手架

npm install -g @vue/cli 

檢查版本

vue -V

Vue項目的開發流程

Vue項目的開發流程，以下：

1. 利用命令行工具建立項目
2. 項目開發前配置
3. 項目開發階段
4. 項目打包與優化階段
5. 項目上線

接下來咱們以商城項目爲例，項目目錄 my-project

1. 利用命令行工具建立項目

vue create my-project     //普通的vue項目
或 
vue ui // 圖形界面方式建立項目
或
vue init webpack my-project      //建立一個基於」webpack」的項目,後面是項目名,

 

進入項目配置嚮導，在項目建立的過程當中，你能夠選擇項目須要依賴的工具如(vue-router、vuex等)。

項目建立完成，啓動項目測試安裝是否成功：

cd  my-project
npm run serve    //運行開發環境

 

　　

運行後，你會看到以下頁面：

 

2. 項目開發前配置

1. 根據需求修改配置
2. 根據需求修改目錄結構
3. 根據需求安裝本身所需的第三方依賴(如組件庫element-ui、axios、vue-filter等)
4. 根據後臺提供的數據接口規範開發mock模擬接口。
5. ....

3. 項目開發階段

根據項目需求開發組件、開發頁面、與後臺進行項目聯調、項目測試。

4. 項目打包與優化階段

項目打包測試

運行下列命令進行項目打包：

npm run build

打包完成後的，最終代碼都會生成在dist目錄中。

項目優化

經過下列命令查看打包分析：

npm run build --report

根據分析結果，進行相應優化

5. 項目上線

將dist目錄中的資源，發佈到線上環境。

目錄結構

/
│
├── node_modules/            # 自動生成，包含Node生產依賴以及開發依賴 │ ├── public/ # 純靜態資源，不會被wabpack構建。 │ ├── index.html # 入口頁面 │ └── favicon.ico # 網站站標 │ ├── src/ # 項目源碼目錄 │ ├── main.js # 入口js文件 │ ├── app.vue # 根組件 │ ├── components # 公共組件目錄 │ │ └── title.vue │ ├── pages/ # 頁面目錄 │ │ ├── about.vue │ │ └── notfound.vue │ ├── assets/ # 資源目錄，這裏的資源會被wabpack構建 │ │ └── images/ │ │ └── logo.png │ ├── routes/ # 前端路由 │ │ └── index.js │ └── store/ # 應用級數據（state） │ └── index.js │ ├── .gitignore # git排除文件 │ ├── babel.config.js │ ├── vue.config.js # vue配置文件 │ ├── package.json # npm包配置文件，裏面定義了項目的npm腳本，依賴包等信息 │ └── README.md 

目錄介紹

文件	類型	描述
src	目錄	存放開發文件目錄
src/main.js	文件	入口文件
src/router	目錄	存放路由目錄
src/components	目錄	存放項目組件(.vue)目錄
src/App.vue	文件	App.vue文件，這是Vue本身的文件類型，在Vue中，官網叫它作組件，單頁面的意思是結構，樣式，邏輯代碼都寫在同一個文件中，當咱們引入這個文件後，就至關於引入對應的結構、樣式和JS代碼
src/assets	目錄	存放 js、css、模板、圖片、flash 等等靜態資源文件
package.json	文件	配置文件，保存一些依賴信息，以及項目初始化配置。
public	目錄	靜態資源，不會被wabpack構建
public/index.html	文件	網站首頁
public/favicon.ico	文件	網站站標
config	目錄	項目配置

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以及相關的loaders

npm install -g webpack
npm install -g webpack-dev-server
爲項目安裝其餘依賴
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：開發環境和生產環節的webpaak配置文件的配置合併

css-loader：編譯寫入css

 style-loader：把編譯後的css整合進html

 file-loader：編譯寫入文件，默認狀況下生成文件的文件名是文件名與MD5哈希值的組合

 vue：vue主程序

 vue-loader：編譯寫入.vue文件

 vue-html-loader：編譯vue的template部分 vue-style-loader：編譯vue的樣式部分 vue-hot-reload-api：webpack對vue實現熱替換 babel-core：ES2015編譯核心 babel-loader：編譯寫入ES2015文檔 babel-preset-es2015：ES2015語法 babel-preset-stage-0：開啓測試功能 babel-runtime：babel執行環境 url-loader 

項目配置

vue.config.js 是一個可選的配置文件，若是項目的 (和 package.json 同級的) 根目錄中存在這個文件，那麼它會被 @vue/cli-service 自動加載。你也可使用 package.json 中的 vue 字段，可是注意這種寫法須要你嚴格遵守 JSON 的格式來寫。

這個文件應該導出一個包含了選項的對象：

// vue.config.js module.exports = { // 選項... } 

配置詳解

可點擊訪問官方配置詳解

module.exports = {
    // 部署應用時的基本 URL
    publicPath: '/',
    // 輸出文件目錄 運行時生成的生產環境構建文件的目錄(默認'dist'，構建以前會被清除)
    outputDir: 'dist',
    //放置生成的靜態資源(js、css、img、fonts)的(相對於 outputDir)目錄(默認'')
    assetsDir: '',
    // eslint-loader 是否在保存的時候檢查
    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 配置項
    // https://vue-loader.vuejs.org/en/options.html
    vueLoader: {},
    // 生產環境是否生成 sourceMap 文件
    productionSourceMap: true,
    // css相關配置
    css: {
        // 是否使用css分離插件 ExtractTextPlugin
        extract: true,
        // 開啓 CSS source maps?
        sourceMap: false,
        // css預設器配置項
        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 插件相關配置
    // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {},
    // webpack-dev-server 相關配置
    devServer: {
        open: process.platform === 'darwin',
        host: '0.0.0.0',
        port: 8080,
        https: false,
        hotOnly: false,
        proxy: null, // 設置代理
        before: app => {}
    },
    // 第三方插件配置
    pluginOptions: {
        // ...
    }
}