项目创建
- 创建 xxx 项目
vue create -p dcloudio/uni-preset-vue xxx
-
选择模板类型
-
进入项目
cd xxx
- 运行项目
npm run dev:mp-weixin
成功运行
搭建配置项目
- 遇到
JSON schema for the TypeScript compiler's configuration file
解决方案:tsconfig.json
{
"exclude": [
...
"config"
],
}
安装代码提示
yarn add @types/uni-app -D
安装 eslint
为了规范代码格式
-
eslint - 校验代码的核心
-
babel-eslint => babel 插件,用 babel 解析 js 文件
-
eslint-plugin-vue => vue 官方的 eslint 插件
yarn add eslint babel-eslint eslint-plugin-vue -D
-
安装配置
yarn add @vue/cli-plugin-eslint @vue/eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-node eslint-plugin-import -D
-
配置 eslint【.eslintrc.js】
module.exports = { root: true, env: { es6: true, browser: true, node: true }, // 配置js全局变量,因为是uni-app,全局的uni是不需要引入的,还有5+的plus对象 globals: { uni: 'readonly', wx: 'readonly', }, extends: ['eslint:recommended', 'plugin:vue/essential'], parserOptions: { parser: 'babel-eslint', }, /** * "off" 0 * "warn" 1 * "error" 2 */ rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', /* allow async-await */ 'generator-star-spacing': 'off', 'no-var': 'error', 'no-empty': 2, 'comma-dangle': [2, 'never'], /* 多个特性的元素应该分多行撰写,每个特性一行 */ 'vue/max-attributes-per-line': [ 2, { singleline: 5, multiline: { max: 1, allowFirstLine: false, }, }, ], /* 使用单引号 */ 'quotes': ['error', 'single'], }, root: true, extends: ['eslint:recommended', 'plugin:vue/essential', '@vue/standard'] };
配置 prettier
- 配置 【.prettierrc】,配合 vscode 的 prettier 插件
{
"singleQuote": true,
"semi": false,
"tabWidth": 2,
"useTabs": false,
"trailingComma": "none"
}
新增请求库luch-request
yarn add luch-request -S
vue.config.js
module.exports = {
transpileDependencies: ['luch-request']
}
新增路由库uni-simple-router
yarn add uni-simple-router uni-read-pages
vue.config.js
const TransformPages = require('uni-read-pages')
const {webpack} = new TransformPages()
module.exports = {
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
ROUTES: webpack.DefinePlugin.runtimeValue(() => {
const tfPages = new TransformPages({
includes: ['path', 'name', 'aliasPath']
});
return JSON.stringify(tfPages.routes)
}, true )
})
]
}
}
安装 UI 库
yarn add uview-ui
配置scss
yarn add node-sass sass-loader -D