vue-cli脚手架搭建项目及Axios封装

一、安装node环境

vue运行是基于node环境的,构建vue框架之前,需要确保node环境安装成功。

在node.js官网下载安装包，傻瓜式安装。

安装node.js后，就已经自带npm（包管理工具），不需要另外再进行安装npm了。

终端输入命令检查是否安装成功，如果输出版本号，说明我们安装node环境成功

二、安装淘宝镜像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搭建项目

进入你的项目目录，创建一个基于 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

六、vue项目目录介绍

1、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生产环境配置；

2、config：项目配置

1）dev.env.js ==> 开发环境变量；

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

3）prod.env.js ==> 生产环境变量；

3、node_modules：npm 加载的项目依赖模块

4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；

2）components：组件目录，我们写的组件就放在这个目录里面；

3）router：前端路由，我们需要配置的路由路径写在index.js里面；

4）App.vue：根组件；

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

5、static：静态资源目录，如图片、字体等。不会被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：本地测试环境请求后台接口的域名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 = {
  // 开发环境
  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】安装

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

文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,324评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,303评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,192评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,555评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,569评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,566评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,927评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,583评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,827评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,365评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,941评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2赞 342