vue-cli腳手架搭建項目及Axios封裝

1、安裝node環境

vue運行是基於node環境的,構建vue框架以前,須要確保node環境安裝成功。

在node.js官網下載安裝包，傻瓜式安裝。

安裝node.js後，就已經自帶npm（包管理工具），不須要另外再進行安裝npm了。

終端輸入命令檢查是否安裝成功，若是輸出版本號，說明咱們安裝node環境成功

​

2、安裝淘寶鏡像cnpm

npm的服務器是外國的，因此有時候咱們安裝「模塊」會很慢很慢。淘寶鏡像將npm上面的模塊同步到國內服務器，提升咱們安裝模塊的時間。安裝完淘寶鏡像以後，cnpm和npm命令行皆可以使用，兩者並不衝突

打開命令行，輸入一下命令安裝cnpm

$ npm install -g cnpm --registry=https://registry.npm.taobao.org複製代碼

3、安裝webpack

npm install webpack -g複製代碼

4、安裝vue-cli腳手架構建工具

全局安裝，命令行輸入

npm install -g vue-cli複製代碼

命令行輸入vue -V查看版本號，出現版本號即爲安裝成功

​

5、vue-cli搭建項目

進入你的項目目錄，建立一個基於 webpack 模板的新項目: vue init webpack 項目名

vue init webpack demo複製代碼

其中demo是項目名稱，能夠根據本身的項目定義名稱，按Enter鍵後，待下載完模板會進入一系列配置問題

​

說明：

• Project name：項目名稱
• Project description：項目描述
• Author：做者
• Vue build：打包方式（standalone和runtime）,按回車選擇默認的就好
• Install vue-router?：是否安裝路由？確定是須要用到的，按 y 回車
• Use ESLint to lint your code?：是否啓用eslint代碼檢測規則？目前不須要，按 n 回車
• Setup unit tests with Karma + Mocha?：是否進行單元測試？目前不須要，按 n 回車
• Setup e2e tests with Nightwatch?：是否進行端對端測試？目前不須要，按 n 回車

配置完成後咱們會在本身的項目目錄看到咱們的項目文件demo,咱們能夠將終端定位到當前項目，並在命令行輸入下面的命令行，項目啓動成功。在瀏覽器地址欄中輸入localhost:8080則能夠訪問項目

npm run dev複製代碼

6、vue項目目錄介紹

​

一、build：構建腳本目錄

　　　　1）build.js ==> 生產環境構建腳本；

　　　　2）check-versions.js ==> 檢查npm，node.js版本；

　　　　3）utils.js ==> 構建相關工具方法；

　　　　4）vue-loader.conf.js ==> 配置了css加載器以及編譯css以後自動添加前綴；

　　　　5）webpack.base.conf.js ==> webpack基本配置；

　　　　6）webpack.dev.conf.js ==> webpack開發環境配置；

　　　　7）webpack.prod.conf.js ==> webpack生產環境配置；

二、config：項目配置

　　　　1）dev.env.js ==> 開發環境變量；

　　　　2）index.js ==> 項目配置文件；

　　　　3）prod.env.js ==> 生產環境變量；

三、node_modules：npm 加載的項目依賴模塊

四、src：這裏是咱們要開發的目錄，基本上要作的事情都在這個目錄裏。裏面包含了幾個目錄及文件：

　　　　1）assets：資源目錄，放置一些圖片或者公共js、公共css。這裏的資源會被webpack構建；

　　　　2）components：組件目錄，咱們寫的組件就放在這個目錄裏面；

　　　　3）router：前端路由，咱們須要配置的路由路徑寫在index.js裏面；

　　　　4）App.vue：根組件；

　　　　5）main.js：入口js文件；

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

六、babelrc：babel編譯參數

七、editorconfig：代碼格式

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

九、postcssrc.js：轉換css的工具

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

十一、package.json：npm包配置文件，定義了項目的npm腳本，依賴包等信息

十二、README.md：項目的說明文檔，markdown 格式

7、修改port端口號

爲了不端口衝突，也能夠修改port，打開config/index.js文件，修改port參數

​

8、安裝element-ui框架

【1】安裝

npm install element-ui -S複製代碼

【2】在main.js文件中引入

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

​

9、安裝sass

【1】安裝

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複製代碼

【2】配置

在webpack.base.conf.js文件夾下配置

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

【3】測試

在要用到scss的組件裏面的style標籤上加上 lang='scss'

在app.vue文件定義一個背景顏色變量，應用到css樣式中，背景變成灰色，說明已成功配置好sass

10、配置本地代理

一、在項目找到config/index.js文件對proxyTable進行配置，配置完成後須要npm run dev重啓一下項目

proxyTable: {
      '/api': {           // 配置後臺代理
        target: 'http://192.168.37.56:8090',
        secure: false,
        pathRewrite: {
          '^/api': ''
        },
        changeOrigin: true
      },
      "/socket": {       // 配置webSocket
        target: 'http://192.168.37.56:8090',
        secure: false,
        pathRewrite: {
          '^/socket': ''
        },
        changeOrigin: true,
        ws: true
      },
    },複製代碼

說明：

• target：本地測試環境請求後臺接口的域名ip
• secure：https須要配置的參數
• pathRewrite：代替targe裏面的地址，好比咱們須要調用"http:192.168.37.56:8090/user/add"接口，咱們能夠直接寫成"/api/user/add"
• changeOrigin：接口跨域須要配置的參數

二、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 // 打包分析
  }
}
複製代碼

11、axios的封裝

【1】安裝

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

【2】在項目的src目錄下新建一個services文件夾，而後在裏面新建一個ajax.js和一個getData.js文件。ajax.js文件用來封裝咱們的axios，getData.js用來統一管理咱們的接口。

​

【3】ajax.js 封裝axios

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

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 });
}複製代碼

【4】getData.js 接口管理

import { get, post } from "@/services/ajax";

//獲取程序配置
export function getConfig() {
    return get("static/config.json", null, { baseURL: "./" });
}

// 查找貨物已佔用位置
export function queryGoodsLabel(params) {
    return get("/goods/queryGoodsLabel", params);
}

// 更換貨物已佔用位置
export function switchLabel(params) {
    return post("/goods/switchLabel", params);
}
}複製代碼

【5】在頁面中調用

import { queryGoodsLabel, switchLabel } from '@/services/getData.js'
export default {
        data() {
            return {}
        },
        methods: {
            changePlace(row) {
                this.params = {
                    id: row.id,
                    customsListNumber: row.customsListNumber,
                }

                // 查找貨物已佔用位置
                queryGoodsLabel(this.params).then(res => {
                    this.$refs.positionDialog.refill(res.data.split(","), true);
                }).catch(err => {

                })
            },
            change(data) {
                this.params.labels = data.join(',')

                // 更換貨物已佔用位置
                switchLabel(this.params).then(res => {
                    this.$Message.success('更換位置成功')
                }).catch(err => {
                    this.$Message.error(err)
                })
            }
        },
    }複製代碼