脚本宝典收集整理的这篇文章主要介绍了Vue奇淫技巧,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
Vue开发技巧
1、转发 请求
config -- index.js -- module.exports -- dev -- ProxyTable
PRoxyTable: {
'/api':{
target:'http://0.0.0.0:8080',
pathrewrITe: {
'^/api':'/static/mock'
}
}
},
2、设置路径别名
build -- webpack.base.conf.js
module.exports -- resolve --a>lias
'vue$': 'vue/dist/vue.ESM.js',
'@': resolve('src'),
'styles': resolve('src/assets/styles'), // 自己配置
在main.js直接 styles,其他地方需要加波浪线 ‘ ~ ’
3、打包上层目录要求
config/index.js/build
--assetsPublicPath: '/', //运行在 根 目录下
assetsPublicPath: '/projects', //运行在Projects目录下
4、.vue文件在webstorm中es6语法报错解决方法
1、安装Vue插件
File --> Settings --> Plugins ,点击Browse repositories,在浏览存储库中搜索
搜索vue,点击 Install 进行安装,安装之后点击 Restart WebStorm 重启
2、新建Vue模板
File --> Settings --> Editor --> File and Code Templates,选择 VUE File ,右测编辑默认模板内容
如果 Files 下没有vue file选项,需自己手动添加
3、语法支持es6设置
(1).Settings --> Language & Frameworks --> JavaScript --> Javascript Language version,选择 ECMAScript 6
这样做所有的.js文件中es6不再报错,但是在.vue文件中es6语法依然报错。
(2).打开 Editor => File Types 找到 HTML 添加 *.vue -- (编辑css、js语法提示。存疑)。
(3).粗暴:直接在<script>标签中添加type="text/ecmascript-6",.vue里面的代码会高亮并支持ES6。--好像不推荐
(4).将script标签添加 type=”es6” 属性
<script type="es6"></script>
然后打开 Editor => Language Injections 添加 XML Tag Injection,内容如下图。
4.补充新功能:右键新建时出现.vue文件类型,就像新建html文件一样
Setting-Editor-File and Code Templates 点击右上角的加号 添加文件 Name为vue File, Extension 为vue,下面的位置可以填写自定义的初始化模板内容。
--不支持Promise
npm install babel-polyfill --save;
main.js -- import 'babel-polyfill';
--打包后代码放到服务器路径错误
config/index.js/build
--assetsPublicPath: '/', //运行在 根 目录下
assetsPublicPath: '/projects', //运行在projects目录下
7、dependencies 与 devdependencies 区别
–save
–save-dev
–save会把依赖包名称添加到package.json文件dependencies键下
–save-dev则添加到package.json文件devDependencies键下
devDependencies -- 开发时用的依赖项,它们不会被部署到生产环境。
Dependencies -- 生产环境中需要的依赖,即正常运行该包时所需要的依赖项。
8、Git连接WebStorm
git链接1
git链接2
以上是脚本宝典为你收集整理的Vue奇淫技巧全部内容,希望文章能够帮你解决Vue奇淫技巧所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。