vuecli3后台管理项目小结
小白优选-> 创建cli项目：新增图形化界面创建项目；
vue ui
回车；懂中文都看得懂了，按步骤往下走就完成了；
下面是一些小结
1.如果不习惯代码检查，最好不安装什么代码检查插件，写代码会把你逼疯，打个log都很麻烦，安装过程注意看自己是否安装了这个鬼玩意儿，这个不是必选的；
2.pc端友好的ui框架：element UI、 Ant Design
移动端相对有好的ui框架：vant
3.npm install = npm i ；npm run dev = npm run serve
4.配置生产的相对路径: 这个文件vue.config.js直接放到根目录
module.exports = {
/** 区分打包环境与开发环境
* process.env.NODE_ENV==='production' (打包环境)
* process.env.NODE_ENV==='development' (开发环境)
* baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/',
*/
// 项目部署的基础路径
// 我们默认假设你的应用将会部署在域名的根部,
// 例如 https://www.my-app.com/
// 如果你的应用部署在一个子路径下，那么你需要在这里
// 指定子路径。比如将你的应用部署在
// https://www.foobar.com/my-app/
// 那么将这个值改为 '/my-app/'
publicPath: process.env.NODE_ENV === 'production'
? './'
: '/', // 构建好的文件输出到哪里
outputDir: "dist", // where to put static assets (js/css/img/font/...) // 是否在保存时使用‘eslint-loader’进行检查 // 有效值: true | false | 'error' // 当设置为‘error’时，检查出的错误会触发编译失败
lintOnSave: true, // 使用带有浏览器内编译器的完整构建版本 // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
runtimeCompiler: false, // babel-loader默认会跳过`node_modules`依赖. // 通过这个选项可以显示转译一个依赖
transpileDependencies: [
/* string or regex */
], // 是否为生产环境构建生成sourceMap?
productionSourceMap: false, // 生产打包时不输出map文件，增加打包速度
chainWebpack: config => {
// 修复HMR
config.resolve.symlinks(true);
},
configureWebpack: () => { }, // CSS 相关选项
css: {
// 将组件内部的css提取到一个单独的css文件（只用在生产环境）
// 也可以是传递给 extract-text-webpack-plugin 的选项对象
// extract: true, // 允许生成 CSS source maps?
sourceMap: false, // pass custom options to pre-processor loaders. e.g. to pass options to // sass-loader, use { sass: { ... } }
loaderOptions: {}, // Enable CSS modules for all css / pre-processor files. // This option does not affect *.vue files.
modules: false
}, // use thread-loader for babel & TS in production build // enabled by default if the machine has more than 1 cores
parallel: require("os").cpus().length > 1, // PWA 插件相关配置 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {}, // configure webpack-dev-server behavior
devServer: {
open: process.platform === "darwin",
disableHostCheck: true, //开启热更新
host: "0.0.0.0",
port: 8088,
https: false,
hotOnly: false, // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy
// proxy: {
// '/api': {
// target: 'https://dev.njjmyj.com/uc_client_api',
// changeOrigin: true,
// ws: true,
// pathRewrite: {
// '^/api': ''
// }
// }
// } // string | Object
// before: app => {}
}, // 第三方插件配置
pluginOptions: {
// ...
},
};
5.axios的封装使用
src目录新建 axios目录（包含两个目录）-> axios.js, api.js；这样做法相对规范；将请求全部归纳到一起
axios.js
// BaseModule.js
import axios from "axios";
import store from '../store'
// const GlobalConfig = require("@/config").config;
const codeMessage = {
200: "服务器成功返回请求的数据。",
201: "新建或修改数据成功。",
202: "一个请求已经进入后台排队（异步任务）。",
204: "删除数据成功。",
400: "错误请求",
401: "未授权，请重新登录",
403: "拒绝访问",
404: "请求错误,未找到该资源",
406: "请求的格式不可得",
410: "请求的资源被永久删除",
422: "当创建一个对象时，发生一个验证错误。",
500: "服务器端出错",
502: "网络错误",
503: "服务不可用",
504: "网络超时"
};
// this.$store.commit('getAppValue','quyoucai')
if (process.env.NODE_ENV == 'development') {
// 开发环境
axios.defaults.baseURL = 'http://192.168.1.32:8901';}
else if (process.env.NODE_ENV == 'debug') {
axios.defaults.baseURL = 'http://192.168.1.32:8901';
}
else if (process.env.NODE_ENV == 'production') {
// 生产环境
axios.defaults.baseURL = 'http://47.103.122.228:8901/qddbackend';
}
/****** 创建axios实例 ******/
const service = axios.create({
timeout: 60 * 1000, // 请求超时时间
});
service.interceptors.request.use(
config => {
if (config.method == 'post') {
config.data = {
...config.data,
appValue: store.state.appValue,
}
}
return config;
},
err => {
return Promise.reject(err);
}
);
service.interceptors.response.use(
response => { //成功请求到数据
//这里根据后端提供的数据进行对应的处理
// 对响应数据做点什么
if (response.status >= 200 && response.status <= 300) {
if (response.data.code !== 0) {
}
return response.data;
}
return response;
},
error => {
console.log(error.response);
if (axios.isCancel(error)) {
console.log("中断请求", error.message);
} else {
// 处理错误
if (error && error.response) {
error.message =
codeMessage[error.response.status] ||
`连接错误${error.response.status}`;
} else {
error.message = "连接到服务器失败";
}
}
return Promise.reject(error.message);
}
)
export default service;
api.js
import service from './axios'
// 登录
// post data =>{}
// get param =>{}
export const login = data => {
return service({
url: '/sys/login',
method: 'post',
data
})
};
export const getFeedBack = data => {
return service({
url: '/feedback/getFeedbackList',
method: 'post',
data
})
};
export const getVersion = data => {
return service({
url: '/sys/getVersionList',
method: 'post',
data
})
};
export const date = () => {
let date = new Date();
let dd = date.getDate();
let mm = date.getMonth() + 1;
let yy = date.getFullYear();
if (mm >= 1 && mm <= 9) {
mm = "0" + mm;
}
if (dd >= 0 && dd <= 9) {
dd = "0" + dd;
}
return `${yy}-${mm}-${dd}`
}
页面按需引入方法
登录
目录结构.png
6.async/await成对出现 ；async包裹调用axios的方法 ， await替代了axios的.then(()=>{})很实用。
7.遇到改不掉的ui样式，两种方法：
1.局部设置：本页面scoped style 里面 -> /deep/
例如：修改class ‘.div’子元素 el-input样式
.div /deep/ .el-input { font-size:12px; }
2.index.html：style
全局设置 deep依然可使用，但是会适用于全局；
8.组建最好异步加载(按需引入)，不要问，问就是 "优雅"
持续更新....
发表评论 (审核通过后显示评论)：