-
5.2 将我们打包好的dist目录中的文件放在刚刚新建的文件夹下，注意打包方式与部署至nginx服务器方式一致，注意打包后对index.html的修改，参考3.打包部署到nginx服务器
-
5.3 启动tomcat服务器，访问路径如下：http://localhost:8083/vueservice/
-
6.解决vue部署至服务器刷新非主页面404问题
-
6.1 路由配置是history模式，所以我们将history模式去掉
-
7.vue组件引用js文件的函数
-
7.1 我们在util.js文件中创建了一个函数，而我们要想在组件中使用这个函数，则必须使用export进行导出
-
7.2 具体在组件中的使用
-
7.3 引用css文件
-
8.配置跨域
-
8.1 首先引入axios
-
8.2 在main.ts(main.js)文件中进行引入
-
8.3 配置跨域
-
8.4 具体如何使用
-
9.解决‘vue-cli-service’ 不是内部或外部命令，也不是可运行的程序或批处理文件的报错
-
9.1 解决办法
-
10.引入echarts
-
1.使用指令下载所需要的库
-
2.在main.js（或者main.ts）文件中进行引用
-
11.推荐一款日期格式化插件 moment
-
11.1 安装
-
11.2 在使用的页面进行引用
-
11.3 如何使用
-
12.vue路由设置
-
12.1 配置页面带参数的跳转
-
12.1.1 传参
-
12.1.2 接受参数
-
12.2 消除地址栏路由参数
-
13.vue-cli取消eslint
-
14.vue引入Cookies
-
14.1 安装js-cookie
-
14.2 在需要使用的文件里引入依赖
-
15.npm cnpm的切换
-
15.1 npm -->cnpm
-
15.2 cnpm–> npm
===================================================================
======================================================================
在 node_modules/@vue/cli-service/lib/commands/serve.js文件中修改，如下图所示
============================================================================
module.exports = {
publicPath: process.env.NODE_ENV === ‘production’ ?
‘./’ :
‘/’
}
npm run build
生成的文件在dist目录下，此时生成的文件是不可以直接访问的，需要部署在http服务器下，所以我们借助nginx来进行部署。
3.3 如果为安装部署nginx，参考此处
3.4 nginx的静态资源的分离，参考此处
3.5 将dist目录下的文件放在你nginx指定的目录下，在浏览器访问即可
nginx的配置：
dist文件对应的目录:
在浏览器访问路径：
=========================================================================
npm install jquery --save
import ‘jquery’
// 引入jq需要加入以下代码
const webpack = require(‘webpack’)
chainWebpack: config => {
config.plugin(‘provide’).use(webpack.ProvidePlugin, [{
$: ‘jquery’,
jquery: ‘jquery’,
jQuery: ‘jquery’,
‘window.jQuery’: ‘jquery’
}])
}
注意：若没有vue.config.js，则需要自己新建一个该文件
下面贴出vue.config.js的代码
// 引入jq需要加入以下代码
const webpack = require(‘webpack’)
module.exports = {
publicPath: process.env.NODE_ENV === ‘production’ ?
‘./’ : ‘/’,
devServer: {
port: 3000, //前台代理端口
proxy: {
‘/vue’: {
target: ‘http: //localhost:2000’, //后台接口
ws: true, //如果要代理websockets
secure: false, // 使用的是http协议则设置为false，https协议则设置为true
changeOrigin: true, //将选项changeOrigin设置true为基于名称的虚拟托管站点。
pathRewrite: {
‘^/vue’: ‘/vue’
}
}
}
},
chainWebpack: config => {
config.plugin(‘provide’).use(webpack.ProvidePlugin, [{
$: ‘jquery’,
jquery: ‘jquery’,
jQuery: ‘jquery’,
‘window.jQuery’: ‘jquery’
}])
}
}
在你要使用的页面中添加
import $ from “jquery”;
============================================================================
5.1 在服务器上的Tomcat的 webapps文件夹下,新建一个文件夹如：vueservice
5.2 将我们打包好的dist目录中的文件放在刚刚新建的文件夹下，注意打包方式与部署至nginx服务器方式一致，注意打包后对index.html的修改，参考3.打包部署到nginx服务器
5.3 启动tomcat服务器，访问路径如下：http://localhost:8083/vueservice/
注意：此处的http://localhost:8083/vueservice/中vueservice要与你自己创建的文件夹的名字一致
=====================================================================================
6.1 路由配置是history模式，所以我们将history模式去掉
打开 router/index.ts，删除mode: “history”
=============================================================================
7.1 我们在util.js文件中创建了一个函数，而我们要想在组件中使用这个函数，则必须使用export进行导出
export function getFileType(fileName) {
var index = fileName.indexOf(“.”);
var type = fileName.substr(index + 1);
return type;
}
import {getFileType} from “…/…/assets/js/util.js”;
注意必须要使用{}进行处理
@import “…/…/assets/css/common.css”;
===================================================================
npm install --save axios vue-axios
import axios from ‘axios’
Vue.prototype.$axios = axios
注意：使用axios时直接使用 this.$axios即可
在vue.config.js文件中添加以下代码，注意：若没有vue.config.js参考本文第四章创建此文件
proxy: {
‘/api’: {
target: ‘http://localhost:8088’, //你要跨域的网址 比如 ‘http://news.baidu.com’,
// secure: true, // 如果是https接口，需要配置这个参数
changeOrigin: true, //这个参数是用来回避跨站问题的，配置完之后发请求时会自动修改http header里面的host，但是不会修改别的
pathRewrite: {
‘^/api’: ‘/api’ //路径的替换规则
//这里的配置是正则表达式，以/api开头的将会被用用‘/api’替换掉，假如后台文档的接口是 /api/list/xxx
//前端api接口写：axios.get(‘/api/list/xxx’) ， 被处理之后实际访问的是：http://news.baidu.com/api/list/xxx
}
}
}
testCross() {
console.log(“aaaaaaaaaaa”);
this.$axios({
method: “post”,
url: “http://localhost:8088/campusGang/test/test1”,
data: {
firstName: ‘Fred’,
lastName: ‘Flintstone’
}
headers: {
“Content-Type”: “application/x-www-form-urlencoded; charset=UTF-8”,
},
}).then((res) => {
console.log(res);
}).catch((error)=>{
console.log(error)
});
},
9.解决‘vue-cli-service’ 不是内部或外部命令，也不是可运行的程序或批处理文件的报错
===============================================================================================================
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。
我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可领取
…(img-KOpPAU8J-1712962139699)]
[外链图片转存中…(img-Qm7OqXGi-1712962139699)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
[外链图片转存中…(img-ftXlbnlS-1712962139700)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。
我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可领取
[外链图片转存中…(img-w0K8rbz0-1712962139700)]
348
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
