一、搭建一个Vue+Elementui项目

您所在的位置：网站首页 › vue怎么打开项目 › 一、搭建一个Vue+Elementui项目

一、搭建一个Vue+Elementui项目

2023-03-26 01:58| 来源: 网络整理| 查看: 265

VsCode 一些必要的插件

Vetur (必要、不解释) Chinese Live Server (浏览器打开) Highlight Matching Tag EsLint Auto Close Tag Auto Rename Tag Import Cost （显示打包文件尺寸） JavaScript (ES6) code snippets node-snippets （node代码段） One Dark Pro （设置主题，很棒） Path Intellisense （路径提示） Prettier (配置.prettier文件使用) Sass

一、安装必须的环境 node 环境安装(相当与js引擎) node -v //查看node版本 npm 环境安装 (用于下载包) //查看npm版本,需要和node 版本匹配 npm -v //查看npm当前绑定的镜像 npm config get registry //修改npm当前的镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org

3、下载cnpm，并设置镜像地址(设置了这一步,就不需要设置npm的镜像)

//设置淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org

4、vue-cli 脚手架

//3.0以上版本 (用这个) npm install -g @vue/cli //2.0版本 npm install -g vue-cli 二、用脚手架创建一个项目运行 vue create 项目名，这里我们手动选择。

2、空格来选择/取消，回车下一步。

3、vue版本选择。根据需要，我选2.x

4、选择router模式。根据需要，这里我选Y

5、选择css预处理器

这里如果要选sass，选择第一个。 node-sass 是用 node来编译 sass；

dart-sass 是用 drat VM 来编译 sass； node-sass是自动编译实时的，dart-sass需要保存后才会生效推荐 dart-sass 性能更好（也是 sass 官方使用的），而且 node-sass 因为国情问题经常装不上。

6、选择eslint模式，eslint官方的模式 + 第三方的模式，我选prettier

7、将你插件的配置放在哪？选择另外的配置文件中

8、最后选项是否保存这一次的配置在下一次创建时。

三、创建eslint 保存自动格式化代码

1、设置vscode编译器配置。

vscode 针对单个项目的设置会保存在根目录的.vscode文件夹中的settings.json文件中，我们只要将配置好的文件copy进去就行了，没有的自己创建即可。

{ // css转rem配置 "cssrem.rootFontSize": 37.5, "window.zoomLevel": 1, //屏幕放大倍数 //采用prettier进行格式化 "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true //保存代码时候自动触发格式化 } 四、在项目引入element-ui 输入 npm install elementui --save 下载包。创建styles文件夹，放入elementui.css文件。再main.js 引入 element-ui 和 css文件 import ElementUI from 'element-ui' import '@/style/elementui.css' Vue.use(ElementUI) 五、创建一个开发环境的接口代理在根目录(与src同级) 创建vue.config.js 文件。做以下配置。注意: vue.config.js 会在项目启动时，自动加载。 module.exports = { publicPath: '/web/', // 部署URL支持相对路径 devServer: { host: '0.0.0.0', port: 8080, proxy: { '/java-api': { target: 'http://192.168.1.238:8080', //java接口地址 pathRewrite: { '^/java-api': '' }, changeOrigin: true, }, '/net-api': { target: 'http://192.168.1.45:9000', //.netcore接口地址 //target: 'http://localhost:44346', pathRewrite: { '^/net-api': '' }, changeOrigin: true, }, } }, }; 六、创建Vue公共弹窗组件

1、创建util文件夹，然后在文件夹下创建alter.js文件，复制如下配置

import { Message, MessageBox } from 'element-ui'; //是否已弹出提示 let isShowMessage = false export const success = (msg, time) => { //弹出成功提示 if (isShowMessage) return isShowMessage = true time = typeof time !== 'undefined' ? time : 3; Message.info({ showClose: false, message: msg, duration: time * 1000, iconClass: 'msgicon ', customClass: 'iflysseui-msg msg-success', offset: 120, onClose: () => { isShowMessage = false } }); }; export const error = (msg, time) => { //弹出错误提示 if (isShowMessage) return isShowMessage = true time = typeof time !== 'undefined' ? time : 3; Message.info({ showClose: false, message: msg, duration: time * 1000, iconClass: 'msgicon ', customClass: 'iflysseui-msg msg-error', offset: 120, onClose: () => { isShowMessage = false } }); }; export const warning = (msg, time) => { //弹出错误提示 if (isShowMessage) return isShowMessage = true time = typeof time !== 'undefined' ? time : 3; Message.warning({ showClose: false, message: msg, duration: time * 1000, iconClass: 'msgicon ', customClass: 'iflysseui-msg msg-warning', offset: 120, onClose: () => { isShowMessage = false } }); }; export const confirm = (content, subcontent, title) => { //弹出确认提示 return window.app.$confirm(`

${content}

${subcontent}

`, title || '提示', { confirmButtonText: '确定', cancelButtonText: '取消', dangerouslyUseHTMLString: true, }); }; export const important = (content, title, btnTxt) => { //弹出需要确认的提示 return MessageBox.alert(`

${content}

`, title || '提示', { confirmButtonText: btnTxt, dangerouslyUseHTMLString: true, callback: () => { } }); }; export const manyMsg = (content, title, btnTxt) => { //弹出需要确认的提示 return MessageBox.alert(`

${content}

`, title || '提示', { confirmButtonText: btnTxt, dangerouslyUseHTMLString: true, callback: () => { } }); }; export const PromptforConfirm = (content, title, btnTxt, _callback) => { //弹出需要确认的提示 return MessageBox.alert(`${content}`, title || '提示', { confirmButtonText: btnTxt, dangerouslyUseHTMLString: true, callback: () => { if (_callback) { _callback() } } }); }; 在main.js里面导入这个文件，并设置为全局变量。 import * as alert from '@/util/alert'; Vue.prototype.$alert = alert;

3、用 this.$alter 全局调用

this.$alter.warning(msg); 七、Http axios 全局配置引入 axios 组件 npm install axios --save 在api文件夹下创建一个http.js 对网络进行全局设置。复制下面配置 window.isProgress = true; //############################ import axios from 'axios'; setAxios(); // 设置axios // axios 配置 function setAxios() { //console.log('setAxios') axios.interceptors.request.use( (request) => { if (window.isProgress) window.app.$insProgress.start(); window.isProgress = true; request.headers.SessionId = window.app.$cookies.get('SessionId'); return request; }, (err) => { return Promise.reject(err); } ); axios.interceptors.response.use( (response) => { window.app.$insProgress.finish(); if (response.status == 200) { //服务端返回错误信息 if ( response.data.status >= 1000 && response.data.status 0 || response.data == 'nosession') ) { console.log('************认证失败=>登录', response.data); window.app.$store.commit('logout'); return; } return response; } if (response.status == 302) { window.location.href = response.data; } else { window.app.$alert.error('哎呀网络连接不畅，请刷新重试～'); } }, (error) => { window.app.$insProgress.finish(); //显示拦截信息 if (error.response) { switch (error.response.status) { case 302: window.location.href = error.response.data; break; case 400: window.app.$alert.error('哎呀网络连接不畅，请刷新重试～'); break; case 401: window.app.$alert.error('未授权，请登录～'); if (process.env.NODE_ENV != 'development') { location.href = '/'; //window.app.$api.jumpOut(); // window.app.$api.sso() } break; case 403: window.app.$alert.error('哎呀网络连接不畅，请刷新重试～'); break; case 404: window.app.$alert.error('服务地址不存在，请联系管理人员'); break; case 504: window.app.$alert.error('哎呀网络连接不畅，请刷新重试～'); break; case 500: window.app.$alert.error('哎呀网络连接不畅，请刷新重试～'); break; } } else { window.app.$alert.error('哎呀网络连接不畅，请刷新重试～'); } //中止promise链 // return new Promise(() => {}); } ); } function getParamData(data) { if (data) { data.params = { ...data, }; } return data; } const http = { ...axios, // get,delete请求加params get: (url, data) => { return axios.get(url, getParamData(data)); }, delete: (url, data) => { return axios.delete(url, getParamData(data)); }, }; export default http; 在api下创建api.js文件,用于导入接口。 import axios from './http' export default { post(url, params, timeout) { if (timeout) { return axios.post(url, params, { timeout: timeout }); } return axios.post(url, params); }, //获取服务器时间 getSeverTime(params) { return axios.post('/net-api/bosiplatform/UserCenter/GetCurrentDate', params); }, } 在main.js 中将api.js 设置为全局的变量 import api from '@/api/api'; Vue.prototype.$api = api 八、引入vue-cookies组件

1.下载组件

npm insall vue-cookies --save

2.在main.js中引入组件

import vueCookies from 'vue-cookies'; Vue.use(vueCookies); 九、在请求时，header加上sessionID request.headers.SessionId = window.app.$cookies.get('SessionId'); 十、引入vue-ins-progress-bar 组件

在请求接口的时候，顶部出现进度条显示。

下载组件。 npm i vue-ins-progress-bar --save 在main.js中引入组件。 import VueInsProgressBar from 'vue-ins-progress-bar'; //进度条 Vue.use(VueInsProgressBar, { position: 'fixed', show: true, height: '3px', });

3、在App.vue文件中，添加组件。

Home | About 在http全局配置中加入进度条配置

组件提供了两个关键的方法: window.app.$insProgress.start(); //开始进度条 window.app.$insProgress.finish(); //结束进度条

在request请求发出时，设置start(); 在repsonse回来时，设置finish();

【本文地址】

一、搭建一个Vue+Elementui项目

一、搭建一个Vue+Elementui项目

今日新闻

推荐新闻