新手必备系列之vue-cli脚手架+element-ui+aixos 构建前端项目流

作者:神秘网友 发布时间:2020-10-29 01:41:32

新手必备系列之vue-cli脚手架+element-ui+aixos 构建前端项目流

新手必备系列之vue-cli脚手架+element-ui+aixos 构建前端项目流程

1、下载vue-cli ( npm install -g vue-cli)
2、构建项目( vue init webpack my-project)构建项目到指定文件夹下,参考
新手必备系列之vue-cli脚手架+element-ui+aixos 构建前端项目流
3、修改package.json的compression-webpack-plugin(打包),默认加载的是最新版的,一般不兼容,目前兼容版本为1.1.12
4、修改config 中的index.js的productionGzip(默认为false,修改为true,改为打包压缩, 默认打包js、css文件)
5、修改config 中的index.js的bundleAnalyzerReport(默认为false,不开启打包分析报告,改为true,打开打包分析报告)
6、npm install & (多个命令可并行) npm run build (编译完成结束)

脚手架基础构建完成,接下来是Element-ui部分:https://element.eleme.cn/2.0/#/zh-CN/component/message (官网参考):
1、在main.js导入ElementUi

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 安装ElementUi插件
Vue.use(ElementUI)

并使用npm install element-ui 下载

2、在vue原生链上挂载常用的提示类和通知类组件

// 全局安装element-ui v-loading指令
Vue.use(ElementUI.Loading.directive)

// 在vue原型链上挂载常用提示或者通知类组件
// loading动画
Vue.prototype.$loading = ElementUI.Loading.service
// 消息提示框
Vue.prototype.$msgbox = ElementUI.MessageBox
// 页面中展示重要的提示信息
Vue.prototype.$alert = ElementUI.MessageBox.alert
// 确认弹框
Vue.prototype.$confirm = ElementUI.MessageBox.confirm
Vue.prototype.$prompt = ElementUI.MessageBox.prompt
// 悬浮出现在页面角落,显示全局的通知提醒消息
Vue.prototype.$notify = ElementUI.Notification
// 点击操作后的反馈提示
Vue.prototype.$message = ElementUI.Message

3、放检验文件(一般构建utils文件夹,放置fetch.js)检验token以及页面跳转(axios安装 https://www.npmjs.com/package/axios 参考 npm install axios 安装)

import axios from 'axios';
import router from '../router';
import { Message } from 'element-ui';
import {
    getToken, clearToken
} from './storage';

// 创建axios实例
const fetch = axios.create({
    baseURL: '/',
    timeout: 30000
});

// request拦截器
fetch.interceptors.request.use(config => {
    // Do something before request is sent
    if (getToken()) {
        config.headers.Authorization = getToken(); // 让每个请求携带token
    }
    return config;
}, error => {
    // Do something with request error
    console.log(error); // for debug
    Promise.reject(error);
});

// respone拦截器
fetch.interceptors.response.use(
    response => {
        /**
        * 下面的注释为通过response自定义code来标示请求状态,当code返回如下情况为权限有问题,登出并返回到登录页
        * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
        */
        const res = response.data;
        if (response.status === 401 || res.status === 40101) {
            clearToken();
            router.push({name: 'login'});
            return Promise.reject(response.message);
        }
        if (res.status === 40301) {
            Message.error('当前用户无相关操作权限!');
            return Promise.reject(response.message);
        }
        if (res.status === 40001) {
            Message.error('账户或密码错误!');
            return Promise.reject(response.message);
        }
        if (response.status !== 200 && res.status !== 200) {
            Message.error('系统忙,请稍后再试!');
        } else {
            return response.data;
        }
    },
    error => {
        Message.error('系统忙,请稍后再试!');
            return Promise.reject(error);
    }
);

export default fetch;

4、设置全局过滤器(utils文件夹下filters.js),举例

import Vue from 'vue';

// 定义和配置各种过滤器
Vue.filter('money', function (val, currency) {
	if (typeof val === 'undefined' || val === null || val === '') {
	return '';
	}
	return '' + (currency === undefined ? '¥' : currency) + parseFloat(val).toFixed(2)
});

5、设置一些本地缓存(utils下storget.js),举例

const TokenKey = 'Token';

export function getToken () {
	return localStorage.getItem(TokenKey);
}

export function setToken (token) {
	return localStorage.setItem(TokenKey, token);
}

export function clearToken () {
	return setToken('');
}

6、设置代码检查(.eslintrc.js,rules新增设置)

// 要求尽可能地使用单引号
'quotes': ['error', 'single'],

// 不检查分号
'semi': 'off',

// 要求缩进采用2个空格
'indent': ['error', 2, { 'SwitchCase': 1 }],

// 要求缩进采用2个空格
'vue/html-indent': ['error', 2],

'no-mixed-spaces-and-tabs': ["error", "smart-tabs"],

// 可以不强制使用自闭合标签
'vue/html-self-closing': 'off',

'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }]

7、代码自动格式化配置(以vscode为例)设置工作区setting.json,举例

{
"files.autoSave": "off",
"eslint.autoFixOnSave": true,
"eslint.validate": [
{
"language": "javascript",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.validation.template": false
}

8、router.js配置路由守卫,举例

router.beforeEach((to, from, next) => {
	// 进入非登录页
	if (to.name !== 'login') {
		// 检查是否有token
		if (getToken()) {
			next();
		} else {
			Message.error('暂无权限')
			next({name: 'login'});
		}
	} else {
		clearToken();
		next();
	}
});

9、写页面,并在route.js配置路由,配置对应后台的接口js(一般为src/api/**.js)
10、配置config/index.js代理地址,例如:

proxyTable: {
//匹配代理的url
'/api': {
	//目标服务器地址
	//target: 'https://hub.yznetcafe.com',
	//target: 'http://149.0.1.18:8765',
	target:'https://hub.yznetcafe.com',
	//路径重写
	pathRewrite: {'^/api' : '/api'},
	changeOrigin: true
	}
},

11、npm run dev运行,完成搭建

新手必备系列是早期整理的内容,有什么不对的地方欢迎大家指针和补充

新手必备系列之vue-cli脚手架+element-ui+aixos 构建前端项目流相关教程

  1. 【转载】OpenCV-Python系列之ORB算法(五十一)

    【转载】OpenCV-Python系列之ORB算法(五十一) ORB是2011年ICCV上作者Rublee所提出,主要针对目前主流的SIFT或者SURF等算法的实时性进行改进。当然在实时性大为提升的基础上,匹配性能也在一定程度较SIFT与SURF算法降低。但是,在图像Two Views匹配对之间变

  2. Cesium系列4 — Vue+Cesium开发环境搭建(基于Cesium1.74)

    Cesium系列4 — Vue+Cesium开发环境搭建(基于Cesium1.74) 1.搭建VUE项目 使用vue-cli工具创建一个vue项目:( 确保已安装node.js ) vue init webpack cesiumtest 2.用webstrom打开项目(其他编码工具也可以) 3.安装cesium 在配置文件package.json,中新加ce

  3. Spring Boot Admin系列(4)-自定义开发UI界面

    Spring Boot Admin系列(4)-自定义开发UI界面 Spring Boot Admin提供了丰富的监控及其他功能,但是在正式上线前,需要二次开发,包含修改界面为自家公司或者去掉不需要的功能,下面将修改UI界面。 环境准备 安装nodejs/npm/cnpm等VUE开发环境 下载admin源码 导

  4. (pytorch-深度学习系列)卷积神经网络LeNet-学习笔记

    (pytorch-深度学习系列)卷积神经网络LeNet-学习笔记 卷积神经网络LeNet 先上图:LeNet的网络结构 卷积(6个5?5 的核)→降采样(池化)(2?2的核,步长2)→卷积(16个5?5的核)→降采样(池化)(2?2的核,步长2)→全连接16?5?5→120→全连接120→84→全连接84→10\be

  5. vue中使用antv G6 的树图TreeGraph (紧凑树)①【新手学习向记

    vue中使用antv G6 的树图TreeGraph (紧凑树)①【新手学习向记录】 目前实现了两点: 1. 根据准备好的数据生成树形图 2. 根据数据数值改变节点以及节点文本颜色 百度上关于g6树形图的文章挺少的,因为g6功能很齐全非常庞大 (非常用心的在做图表,真的好用)

  6. Java源码系列3——LinkedHashMap

    Java源码系列3——LinkedHashMap LinkedHashMap 是 HashMap 的有序实现。 LinkedHashMap 用一条双向链表来维护顺序,迭代的时候也使用自己实现的迭代器。 public static void main(String[] args) { HashMapString, Integer h = new HashMap(33); h.put(one,

  7. Vue3实战系列:Vue3.0 + Vant3.0 搭建种子项目

    Vue3实战系列:Vue3.0 + Vant3.0 搭建种子项目 最近在用 Vue3 写一个开源的商城项目,开源后让大家也可以用现成的 Vue3 大型商城项目源码来练练手,目前处于开发阶段,过程中用到了 Vant3.0,于是就整理了这篇文章来讲一下如何使用 Vue3.0 + Vant 3.0 搭建种

  8. 数据分析入门系列教程-数据清洗

    数据分析入门系列教程-数据清洗 公众号后台回复 “图书“ ,了解更多号主新书内容 作者:周萝卜 来源:萝卜大杂烩 从今天开始,我们再一起来学习数据分析,共同进步! 首先先来进行一个数据清洗的实战,使用比较经典的数据集,泰坦尼克号生存预测数据。 数据