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 语法支持es6设置  --   第一张图Languages & Frameworks > JavaScript把 Javascript Language version 改为 ECMAScript 6,这样做所有的.js文件中es6不再报错，但是在.vue文件中es6语法依然报错。2.vue文件中es6语法报错 (1).打开 Editor => File Types 找到 HTML 添加 *.vue -- (编辑css、js语法提示。存疑)。 (2).粗暴：直接在<script>标签中添加type="text/ecmascript-6"，.vue里面的代码会高亮并支持ES6。--好像不推荐 (3).将script标签添加 type=”es6” 属性  --- 第二张图       <script type="es6"></script> 然后打开 Editor => Language Injections 添加 XML Tag Injection，内容如下图。 3.补充新功能：右键新建时出现.vue文件类型，就像新建html文件一样  -- 第三张图Setting-Editor-File and Code Templates 点击右上角的加号 添加文件 Name为vue File, Extension 为vue,下面的位置可以填写自定义的初始化模板内容。

6、防止安卓低版本白屏问题

--不支持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 -- 生产环境中需要的依赖，即正常运行该包时所需要的依赖项。

5、Git连接WebStorm
git链接1
git链接2