Vue奇淫技巧

jiezi

6 年前

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

Vue 开发技巧