webstorm 开发 uni-app 配置

webstorm 开发 uni-app 配置

最近在使用uni-app结合uview-ui开发微信小程序，总结一下如何配置webstorm环境

首先配置webpack，让webstorm可以识别路径，还可以把public路径mark as resource root

　　在项目根目录创建一个webpack.webstorm.js，配置好之后就可以通过 :require('@/assets/')引用资源

// 这个文件只是用来让webstorm可以识别 @ ~ 文件的，没有别的什么用处
// 需要在webstorm里面添加webpack配置文件指定为该文件

const path = require('path')

module.exports = {
  resolve: {
    extensions: ['.js', '.json', '.vue', '.ts'],
    root: path.resolve(__dirname),
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '~': path.resolve(__dirname, 'src'),
      '@img': path.resolve(__dirname, 'src/assets/img')
    }
  }
}

接下来配置uview-ui和easycom

　由于uview-ui不像element-ui一样写的有typescirpt声明文件，要想让webstorm自动提示出组件，可以有两种解决方案

　第一张方案就是不使用npm安装，而是直接把整个项目下载到项目根目录里面，webstorm会自动识别并自动导入

   第二种方式就是创建一个无用的文件来手动执行Vue.component这样webstorm也会以为全局注册了组件，然后再结合pages.json中的easycom配置就可以使用hbuilderx推荐的自动导包了

// 为了能够让 webstorm 识别 pages.json 里面配置的 easycom
// 把所有使用到的 uview-ui 组件使用Vue.component 全局导入，让IDE可以识别
// !! 这个文件不会在任何代码中被引用，也不应该被引用!!
import Vue from 'vue'
import UButton from 'uview-ui/components/u-button/u-button'
Vue.component(UButton.name, UButton)

   使用第二种方法还可以让webstorm识别nuxt中的store，创建一个假的store导出文件