vue-cli2.x項目的建立及配置

前言

適用於vue2.x,基於vue-cli腳手架
複製代碼

環境準備

node安裝

1. 官網下載並安裝node.js,默認安裝npm

2. 安裝淘寶鏡像cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 安裝webpack

npm install webpack -g

4. 安裝vue-cli腳手架（舊版本，最新的須要另外安裝@vue/cli-init才能按照2.x的方式初始化工程）

初始化項目

進入項目目錄，

vue init webpack projectName
複製代碼

能夠選擇初始化工程時安裝依賴或者先初始化。工程建立完成，進入工程根目錄，使用npm run dev啓動工程，在瀏覽器窗口輸入localhost:8080/#/，出現下面的頁面就表示建立成功了。

項目目錄

---

build：構建腳本目錄

• build.js ==> 生產環境構建腳本
• check-versions.js ==> 檢查npm，node.js版本
• utils.js ==> 構建相關工具方法
• vue-loader.conf.js ==> 配置了css加載器以及編譯css以後自動添加前綴
• webpack.base.conf.js ==> webpack基本配置
• webpack.dev.conf.js ==> webpack開發環境配置
• webpack.prod.conf.js ==> webpack生產環境配置

config:項目配置

• dev.env.js ==> 開發環境變量
• prod.env.js ==> 生產環境變量
• index.js ==> 項目配置文件

node_modules: npm加載的項目依賴模塊 rc：這裏是咱們要開發的目錄

• assets：資源目錄，放置一些圖片或者公共js、公共css。這裏的資源會被webpack構建
• components：組件目錄，存放組件
• router：前端路由，路由路徑寫在index.js
• App.vue：根組件
• main.js：入口js文件

static：靜態資源目錄，如圖片、字體等。不會被webpack構建

---

babelrc：babel編譯參數

---

editorconfig：代碼格式

---

gitignore：git上傳須要忽略的文件配置

---

postcssrc.js：轉換css的工具

---

index.html：首頁入口文件，能夠添加一些 meta 信息等

---

package.json：npm包配置文件，定義了項目的npm腳本，依賴包等信息 README.md：項目的說明文檔，markdown 格式

集成第三方UI框架（以element-ui爲例）

安裝element-ui

npm install element-ui -S
複製代碼

在main.js文件中引入

• 全局引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
複製代碼

• 按需引入

安裝sass/less

npm install --save-dev css-loader
npm install --save-dev sass-loader
npm install --save-dev style-loader

//sass-loader依賴於node-sass
npm install --save-dev node-sass
複製代碼

配置loaders

rules:[
    ....
    {
        test: /\.sass$/,
        loaders: ['style', 'css', 'sass']
    }
]
複製代碼

配置本地代理（解決接口跨域問題）

• config/index.js文件對proxyTable進行配置

proxyTable: {
      '/api': {           // 配置後臺代理
        target: 'http://192.168.37.56:8090', //接口的域名ip
        secure: false, //https須要配置的參數
        pathRewrite: {
          '^/api': '' //代替target中的地址
        },
        changeOrigin: true //跨域須要配置的參數
      },
      "/socket": {       // 配置webSocket
        target: 'http://192.168.37.56:8090',
        secure: false,
        pathRewrite: {
          '^/socket': ''
        },
        changeOrigin: true,
        ws: true
      },
    },
複製代碼

• config/index.js的配置參數

'use strict'
const path = require('path')

module.exports = {
  // 開發環境
  dev: {
    assetsSubDirectory: 'static', // 編譯輸出的二級目錄
    assetsPublicPath: '/',  // 編譯發佈的根目錄，可配置爲資源服務器域名或CDN域名
    proxyTable: {}, // 配置後臺代理
    host: 'localhost', // 運行測試頁面的域名ip
    port: 8080,  // 運行測試頁面的端口
    autoOpenBrowser: false, // 項目運行時是否自動打開瀏覽器
    errorOverlay: true, // 瀏覽器錯誤提示
    notifyOnErrors: true, // 跨平臺錯誤提示
    poll: false, // 使用文件系統獲取文件改動的通知devServer.watchOptions
    devtool: 'cheap-module-eval-source-map', // 增長調試，該屬性爲原始源代碼
    cacheBusting: true, // 使緩存失效
    cssSourceMap: true // 代碼壓縮後bug定位將很是困難，引入SourceMap記錄壓縮先後的位置信息記錄，當產生錯誤時直接定位到壓縮前的位置
  },
  // 生產環境
  build: {
    index: path.resolve(__dirname, '../dist/index.html'), // 編譯輸入的index.html文件
    assetsRoot: path.resolve(__dirname, '../dist'), // 編譯輸出的靜態資源路徑（項目打包時的文件）
    assetsSubDirectory: 'static', // 編譯輸出的二級目錄
    assetsPublicPath: '/', // 編譯發佈的根目錄，可配置爲資源服務器域名或CDN域名
    productionSourceMap: true, // 是否開啓cssSourceMap
    devtool: '#source-map', // 增長調試，該屬性爲原始源代碼
    productionGzip: false, // 是否開啓gzip
    productionGzipExtensions: ['js', 'css'], // 須要使用gzip壓縮文件的擴展名
    bundleAnalyzerReport: process.env.npm_config_report // 打包分析
  }
}
複製代碼

基於axios封裝網絡請求工具

1. 安裝axios

npm install axios --save-dev
複製代碼

2. 網絡請求工程化管理目錄

-services
    ---request.js //封裝axios
    ---api.js //封裝業務接口方法

複製代碼

3. request.js

import axios from "axios";
import store from "@/store";
import { Message } from "element-ui";
let router = import("@/router");

/** *建立axios實例 */
axios.defaults.baseURL = "/api";
axios.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8";
axios.defaults.headers["X-Requested-With"] = "XMLHttpRequest";
axios.defaults.headers["Cache-Control"] = "no-cache";
axios.defaults.headers["pragma"] = "no-cache";

let source = axios.CancelToken.source();

//請求添加token
axios.interceptors.request.use(request => {
    request.headers["demo-auth"] = store.state.loginInfo ? store.state.loginInfo.userId : ""; 
    // 已將userId保存在store中
    return request;
})

//切換頁面取消請求
axios.interceptors.request.use(request => {
    request.cancelToken = source.token;
    return request;
});
router.then(lib => {
    lib.default.beforeEach((to, from, next) => {
        source.cancel()
        source = axios.CancelToken.source();
        next()
    })
})

//登陸過時跳轉
axios.interceptors.response.use(response => {
    let data = response.data;
    if (
        [10002].includes(data.ret)
    ) {
        router.then(lib => lib.default.push({ name: "login" })); // 跳轉到登陸頁面
        Message.warning(data.msg);
    }
    return response;
})

//返回值解構
axios.interceptors.response.use(response => {
    let data = response.data;
    let isJson = (response.headers["content-type"] || "").includes("json");
    if (isJson) {
        if (data.code === 200) {
            return Promise.resolve({
                data: data.data,
                msg: data.msg,
                code: data.code,
            });
        }
        return Promise.reject(
            data.msg ||
            "網絡錯誤"
        );
    } else {
        return data;
    }
}, err => {
    let isCancel = axios.isCancel(err);
    if (isCancel) {
        return new Promise(() => { });
    }
    return Promise.reject(
        err.response.data &&
        err.response.data.msg ||
        "網絡錯誤"
    );
})

export function post(url, data, otherConfig) {
    return axios.post(url, data, otherConfig);
}

export function get(url, data, otherConfig) {
    return axios.get(url, { params: data, ...otherConfig });
}

/** *get,post,單個請求，多個請求，帶有超時時間的請求 */
複製代碼

4. api.js

• 能夠採用兩層管理model+service(面向對象封裝)

export function xxx() {
    return request.get();
}
export function xxx() {
    return request.post();
}
複製代碼