vscode配置vue开发

vscode配置vue开发

• 安装vue语法提示插件: vetur

• 安装vue格式化插件: vue-format

• 安装插件(实际项目中使用这个格式化为主): ESLint

"eslint.validate": [
  "javascript",
  "javascriptreact",
  {
    "language": "vue",
    "autoFix": true
  }
],
"eslint.autoFixOnSave": true,
"vetur.format.defaultFormatter.html": "prettier",
"vetur.format.defaultFormatter.js": "vscode-typescript",
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"editor.formatOnSave": true,
"editor.tabSize": 2,
"editor.formatOnSaveTimeout": 5000,

npm

# 最好不要使用cnpm,会出现意想不到的错误
npm config set registry https://registry.npm.taobao.org
# 安装的时候带上
npm install -g @vue/cli --registry=http://registry.npm.taobao.org

uniapp

• 推荐使用cli安装

# 如果官方的安装等待很长时间,手动安装:
# 手动clone官方模板创建工具
git clone https://github.com/dcloudio/uni-preset-vue.git
cd uni-preset-vue
yarn install
cd ..
# 创建我的项目模板
vue create -p ./uni-preset-vue my-demo
# 选择自己的模板即可安装
cd my-demo
npm run serve

• 安装代码提示:

npm init -y

npm i @dcloudio/uni-helper-json
npm i @types/uni-app @types/html5plus -D

• 代码块智能提示

# 从 github 下载 uni-app 代码块，放到项目目录下的 .vscode 目录即可拥有和 HBuilderX 一样的代码块。
https://github.com/zhetengbiji/uniapp-snippets-vscode
# 另外，uni-app 项目下的 manifest.json、pages.json 等文件可以包含注释。vscode 里需要改用 jsonc 编辑器打开。

uniapp开发 package.json 更新文件之后npm install

{
  "name": "test_covert",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "npm run dev:h5",
    "build": "npm run build:h5",
    "build:app-plus": "cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build",
    "build:custom": "cross-env NODE_ENV=production uniapp-cli custom",
    "build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
    "build:mp-alipay": "cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build",
    "build:mp-baidu": "cross-env NODE_ENV=production UNI_PLATFORM=mp-baidu vue-cli-service uni-build",
    "build:mp-qq": "cross-env NODE_ENV=production UNI_PLATFORM=mp-qq vue-cli-service uni-build",
    "build:mp-toutiao": "cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build",
    "build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    "dev:app-plus": "cross-env NODE_ENV=development UNI_PLATFORM=app-plus vue-cli-service uni-build --watch",
    "dev:custom": "cross-env NODE_ENV=development uniapp-cli custom",
    "dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve",
    "dev:mp-alipay": "cross-env NODE_ENV=development UNI_PLATFORM=mp-alipay vue-cli-service uni-build --watch",
    "dev:mp-baidu": "cross-env NODE_ENV=development UNI_PLATFORM=mp-baidu vue-cli-service uni-build --watch",
    "dev:mp-qq": "cross-env NODE_ENV=development UNI_PLATFORM=mp-qq vue-cli-service uni-build --watch",
    "dev:mp-toutiao": "cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --watch",
    "dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
    "info": "node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js"
  },
  "dependencies": {
    "@dcloudio/uni-app-plus": "^2.0.0-24220191115011",
    "@dcloudio/uni-h5": "^2.0.0-24220191115011",
    "@dcloudio/uni-helper-json": "*",
    "@dcloudio/uni-mp-alipay": "^2.0.0-24220191115011",
    "@dcloudio/uni-mp-baidu": "^2.0.0-24220191115011",
    "@dcloudio/uni-mp-qq": "^2.0.0-24220191115011",
    "@dcloudio/uni-mp-toutiao": "^2.0.0-24220191115011",
    "@dcloudio/uni-mp-weixin": "^2.0.0-24220191115011",
    "@dcloudio/uni-stat": "^2.0.0-24220191115011",
    "flyio": "^0.6.2",
    "regenerator-runtime": "^0.12.1",
    "vue": "^2.6.10",
    "vuex": "^3.0.2"
  },
  "devDependencies": {
    "@dcloudio/uni-cli-shared": "^2.0.0-24220191115011",
    "@dcloudio/uni-template-compiler": "^2.0.0-24220191115011",
    "@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.0-24220191115011",
    "@dcloudio/vue-cli-plugin-uni": "^2.0.0-24220191115011",
    "@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.0-24220191115011",
    "@dcloudio/webpack-uni-mp-loader": "^2.0.0-24220191115011",
    "@dcloudio/webpack-uni-pages-loader": "^2.0.0-24220191115011",
    "@types/html5plus": "*",
    "@types/uni-app": "*",
    "@vue/cli-plugin-babel": "3.5.1",
    "@vue/cli-service": "^4.1.0",
    "babel-plugin-import": "^1.11.0",
    "mini-types": "*",
    "miniprogram-api-typings": "^2.8.0-2",
    "postcss-comment": "^2.0.0",
    "vue-template-compiler": "^2.6.10",
    "vue": "^2.6.11"
  },
  "browserslist": [
    "Android >= 4",
    "ios >= 8"
  ],
  "uni-app": {
    "scripts": {}
  }
}