** 最近比较闲,学习了一下vue,玩的很开心,开发完成的代码也扔nginx里跑起来了,这时就想,把vue打包生成的代码,放到现有的项目里要怎么做呢。于是,遇到特别简单又讨厌的路径问题。**
1.首先,简单说下创建vue项目的过程
工具:用的是HbuilderX,就是在vue官网点哪个不知名的链接下载的,不过还挺好用的。
然后npm,cnpm之类的自己去准备好了,网上有很多文章之类,这里就不多唠了。
本人参考的是:https://www.runoob.com/nodejs/nodejs-npm.html
- 创建项目:
像下面这样选
- 项目目录
下图请忽略,红框里的内容,刚建完是没有的。
- 写代码运行
本人写了editor组件,就想试试mavon-editor这个markdown编辑器效果跟wangeditor对比一下。
效果确实不错,跟csdn的markdown编辑器一样。
想要源码的,可以留言,也可自行百度。
运行:
效果:
2.如果想把用vue开发的编辑器应用到现有项目应该怎么做
重点来了,自我感觉挺好看的,想用到现有项目里,但是,运行npm run build 生成的dist文件夹中index.html中引用的js都是/,而我想拼上更多的东西,比如我现有项目的目录什么的。
网上找的文章基本都是有builder文件夹,builde.js什么的,很不巧,我这最新版没有。后来找到官网才找到说明。
官网:https://cli.vuejs.org/config/
这里基本说的是,vue.config.js已经变为了可选的配置,如果需要就自己新建。
讲上面的三句话读完,基本找到答案了,于是就有了我上面目录那张图里新建的vue.config.js
配置如下:
module.exports = {
publicPath : '/mbyd/'
}
然后重新运行build后,查看index.html
写到这里,讲真,真心觉得前端的东西说明或者文章实在太少了。真心希望前端的大神们,拿出点功夫简单写写,讲讲。java后台框架一搜一大堆,前端的框架一搜一个样,脑壳疼。