20210825_vue环境搭建前端学习笔记
1概述
1.1目录结构
image-20211001195604044.png
1.2项目配置细节
1.2.1配置拦截器
// E:\workdirectory\Dev\remotestudy\technicaltools\C050myvueelementdemo\myvue_front\src\config\http.js
// 接口请求拦截器
import Vue from 'vue';
import VueResource from 'vue-resource';
Vue.use(VueResource);
// 接口请求拦截器
Vue.http.interceptors.push((request, next) => {
// request.credentials = true;
request.url = '/api' + request.url; // 每个接口请求拦截前加前缀: /api
// :/server/paging -->/api/server/paging
console.log(request.url);
next((response) => {
// 在响应之后传给then之前对response进行修改和逻辑判断。
// 对于token时候已过期的判断，就添加在此处，
// 页面中任何一次 http请求都会先调用此处方法
if (response.status === 401) {
console.log('response.body:', response.body);
window.location.reload();
}
return response;
});
})
1.2.1.1引用拦截器
// E:\workdirectory\Dev\remotestudy\technicaltools\C050myvueelementdemo\myvue_front\src\main.js
import './config/http'
1.2.2webpack.base.conf.js
E:\workdirectory\Dev\remotestudy\technicaltools\C050myvueelementdemo\myvue_front\config\webpack.base.conf.js
const utils = require('./utils');
// 1.插件定义
// 1.1.MiniCssExtractPlugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 1.2.html-webpack
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 1.3.clean-webpack
const CleanWebpackPlugin = require('clean-webpack-plugin');
// 1.4.vue-loader
const {VueLoaderPlugin} = require('vue-loader');
module.exports = function() {
return {
// 打包入口文件
entry:{
// chunk:app-->main.js(组件:App.vue,内置登录校验,topHeader:created,sideNav:beforeCreate)
app:'./src/main.js',
// chunk:login-->login.js(组件:login.vue)
login:'./src/page/base/login/login.js'
},
resolve: {
extensions: ['.js','.vue','.json'],
alias:{
'vue$': 'vue/dist/vue.esm.js',
// @:代表 src
'@': utils.root('src'),
}
},
// module 配置处理模块的规则
module:{
// //使用正则表达式
// noParse: /jquery|chartjs/
// // //使用函数，从webpack3.0.0开始支持
// noParse: (content)=>{
// return /jquery|chartjs/.test(content);
// }
rules:[
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [utils.root('src')],
options: {
formatter: require('eslint-friendly-formatter'),
},
},
{
// 处理vue，vue-loader可以将vue文件中的内容分开，提取每个语言块，然后再用相应的loader去加载
test: /\.vue$/,
loader: 'vue-loader',
},
{
// 处理 es6 浏览器兼容版本的js，接入babel，需要先安装模块 babel-core babel-loader
test: /\.js$/,
loader: 'babel-loader',
include: [
utils.root('src'),
utils.root('test'),
],
exclude:[/node_modules/],
},
// 处理图片
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options:{
limit:10000,
outputPath: 'assets/img',
},
},
// 处理字体
{
test :/\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit:10000,
outputPath: 'assets/fonts',
},
},
],
},
plugins:[ // 3.插件管理
// 3.1.CleanWebpackPlugin
new CleanWebpackPlugin((['dist'])),
// 3.2.HtmlWebpackPlugin
new HtmlWebpackPlugin({
filename:utils.root('dist/login.html'),
title:'登录页面',
template: utils.root('login.html'),
// 将chunks按引入的顺序排序，不用这个的话，引入到 html中的js可能是错乱排序的
chunksSortMode: 'manual',
// chunks用来设置引入的js，不设置的话会默认把入口的所有文件都引入html中
// 引入 login.js
chunks: ['login'],
inject: 'body',
}),
// 3.3.配置插件:HtmlWebpackPlugin
new HtmlWebpackPlugin({
filename:utils.root('dist/index.html'),
title:'XXX信息管理系统',
template: utils.root('index.html'),
// 引入 app.js
chunks: ['app'],
inject: 'body',
}),
// 3.4.VueLoaderPlugin
new VueLoaderPlugin(),
// 3.5.VueLoaderPlugin
new MiniCssExtractPlugin({
filename: '[name].css',
}),
]
}
}
1.2.2webpack.dev.config.js开发环境配置后端代理
const utils = require('./utils');
const webpackMerge = require('webpack-merge');
// 1.MiniCssExtractPlugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// const webpack = require('webpack');
const baseWebpackConfig = require('./webpack.base.conf');
// 2.环境配置
process.env.NODE_ENV = process.env.NODE_ENV ? process.env.NODE_ENV : 'development';
module.exports = function () {
return webpackMerge(baseWebpackConfig(),{
mode: 'development',
// devtool 用于排错，正确找到错误的位置，并且是我们能看懂的错误代码
devtool: 'cheap-module-source-map',
output: {
path: utils.root('dist'),
filename: '[name].js',
chunkFilename: '[name].chunk.js',
sourceMapFilename: '[file].map'
},
module:{
rules: utils.styleLoaders({sourceMap: false}),
},
plugins:[
new MiniCssExtractPlugin({
filename: '[name].css',
}),
],
// 3.先把 webpack-dev-server工具安装到本地,webpack-dev-server
// 发布时,如有Nginx代理,则不需要
devServer: { // 只用于开发环境
host:'localhost',
port:9090,
inline:true,
watchOptions:{
// 不监听变化:node_modules
ignored:/node_modules/,
},
// hot:true, // 是否热部署
historyApiFallback: true,
proxy: { // 必须先配置拦截器,增加约定的前缀标识,后台代理服务地址(需支持跨域cors)
'/api': {
target:'http://127.0.0.1:8080',
secure: false,
changeOrigin: true,
},
},
}
})
}
1.2.3.webpack.prod.config.js:
1.2.4工具类使用
// E:\workdirectory\Dev\remotestudy\technicaltools\C050myvueelementdemo\myvue_front\src\config\utils.js
const formatDateTime = (time,type='-')=>{
if(!time) return;
return formatDate(time,type)+' '+formatTime(time);
}
const responseText = (val)=>{
if(Object.prototype.toString.call(val) === '[object Array]'){
return val;
} else {
return [];
}
};
export {
formatDateTime,
responseText,
formatDate,
formatTime,
debounce,
}
// E:\workdirectory\Dev\remotestudy\technicaltools\C050myvueelementdemo\myvue_front\src\page\manage\message\message.vue
import {formatDateTime, responseText, debounce} from '../../../config/utils.js';
responseText(body.data.records).forEach((item) => {
if (item.createTime != null) {
item.createTime = new Date(item.createTime).toLocaleString().replace(/:\d{1,2}$/, ' ');
}
})
1.3项目测试打包
// 1.进入项目根目录
cd E:\workdirectory\Dev\remotestudy\technicaltools\C050myvueelementdemo\myvue_front
// 2.下载必须的依赖
npm install
// 3.启动
npm run start
启动成功后，端口在9090，默认会跳转到登录页面
http://localhost:9090/
http://localhost:9090/server
http://localhost:9090/login.html
1.4项目部署打包
// 1.
npm install
// 2.如果下载失败，请删除 package-lock.json 文件
npm cache clean --force
// 3.打包
// 这个命令是打包,编译vue为静态文件,你的vue项目下会出现一个dist的文件夹
npm run build
2代码示例
3总结
3.1vue框架结构
3.2index.html啥鬼
3.2.1编译前
<%= htmlWebpackPlugin.options.title %>
3.2.2编译后
XXX信息管理系统
3.3跳转区别
// 1.内置 $router.path=undefinded
http://localhost:8080/index.html;
// 2.内置 $router.path='/server'
window.location.href='/server';
参考
1一个实际的案例介绍Spring Boot + Vue 前后端分离
https://www.cnblogs.com/nele/p/7858581.html
2SpringBoot + Vue Element UI 实现前后端分离
https://liuyanzhao.com/9511.html
https://github.com/saysky/springboot-vue-example/
3Spring boot 和 Vue 前后端分离项目的启动部署（详细版）
https://blog.csdn.net/ltd010/article/details/103499197
4关于Vue实例的生命周期created和mounted的区别
https://segmentfault.com/a/1190000008570622
5.关于Vue实例的生命周期created和mounted的区别
https://segmentfault.com/a/1190000008570622