一松靡、安裝node環(huán)境

vue運行是基于node環(huán)境的,構建vue框架之前,需要確保node環(huán)境安裝成功候学。

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

安裝node.js后敛苇，就已經自帶npm（包管理工具）煤痕，不需要另外再進行安裝npm了。

終端輸入命令檢查是否安裝成功接谨，如果輸出版本號，說明我們安裝node環(huán)境成功

二塘匣、安裝淘寶鏡像cnpm

npm的服務器是外國的脓豪，所以有時候我們安裝“模塊”會很慢很慢。淘寶鏡像將npm上面的模塊同步到國內服務器忌卤，提高我們安裝模塊的時間扫夜。安裝完淘寶鏡像之后，cnpm和npm命令行皆可使用驰徊，二者并不沖突

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

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

三、安裝webpack

npm install webpack -g

四棍厂、安裝vue-cli腳手架構建工具

全局安裝颗味，命令行輸入

npm install -g vue-cli

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

五牺弹、vue-cli搭建項目

進入你的項目目錄浦马，創(chuàng)建一個基于 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代碼檢測規(guī)則磺陡？目前不需要，按 n 回車
• Setup unit tests with Karma + Mocha?：是否進行單元測試漠畜？目前不需要币他，按 n 回車
• Setup e2e tests with Nightwatch?：是否進行端對端測試？目前不需要盆驹，按 n 回車

配置完成后我們會在自己的項目目錄看到我們的項目文件demo,我們可以將終端定位到當前項目圆丹，并在命令行輸入下面的命令行，項目啟動成功躯喇。在瀏覽器地址欄中輸入localhost:8080則可以訪問項目

npm run dev

六辫封、vue項目目錄介紹

1硝枉、build：構建腳本目錄

1）build.js ==> 生產環(huán)境構建腳本；

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開發(fā)環(huán)境配置；

7）webpack.prod.conf.js ==> webpack生產環(huán)境配置拓劝；

2雏逾、config：項目配置

1）dev.env.js ==> 開發(fā)環(huán)境變量；

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

3）prod.env.js ==> 生產環(huán)境變量栖博；

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

4厢洞、src：這里是我們要開發(fā)的目錄仇让，基本上要做的事情都在這個目錄里。里面包含了幾個目錄及文件：

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

2）components：組件目錄踊淳，我們寫的組件就放在這個目錄里面；

3）router：前端路由陕靠，我們需要配置的路由路徑寫在index.js里面嚣崭；

4）App.vue：根組件；

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

5雹舀、static：靜態(tài)資源目錄，如圖片粗俱、字體等说榆。不會被webpack構建

6、babelrc：babel編譯參數

7寸认、editorconfig：代碼格式

8签财、gitignore：git上傳需要忽略的文件配置

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

10偏塞、index.html：首頁入口文件唱蒸，可以添加一些 meta 信息等、

11灸叼、package.json：npm包配置文件神汹，定義了項目的npm腳本庆捺，依賴包等信息

12、README.md：項目的說明文檔屁魏，markdown 格式

七滔以、修改port端口號

為了避免端口沖突，也可以修改port氓拼，打開config/index.js文件你画，修改port參數

八、安裝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)

九桃漾、安裝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

十剥槐、配置本地代理

1、在項目找到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：本地測試環(huán)境請求后臺接口的域名ip
• secure：https需要配置的參數
• pathRewrite：代替targe里面的地址，比如我們需要調用"http:192.168.37.56:8090/user/add"接口颅崩，我們可以直接寫成"/api/user/add"
• changeOrigin：接口跨域需要配置的參數

2几于、config/index.js配置參數的詳細解析

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

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

十一、axios的封裝

【1】安裝

npm install axios --save-dev

【2】在項目的src目錄下新建一個services文件夾漆弄，然后在里面新建一個ajax.js和一個getData.js文件睦裳。ajax.js文件用來封裝我們的axios，getData.js用來統(tǒng)一管理我們的接口撼唾。

【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)
                })
            }
        },
    }

文章每周持續(xù)更新廉邑，可以微信搜索「 前端大集錦 」第一時間閱讀，回復【視頻】【書籍】領取200G視頻資料和30本PDF書籍資料