目录
相关资源
注意事项
- JS代码使用ES6规范，如果使用commonJS规范编译报错
- scss中深度选择器请使用::v-deep，如果使用/deep/编译报错
- 使用yarn则node版本>=16.20.2
安装vue cli
npm install -g @vue/cli
使用uni-preset-vue模板创建uniapp
# 创建项目，下载依赖才能创建成功
vue create -p dcloudio/uni-preset-vue uniapp-demo
- 上面方法失败可通过拉取Gitee源代码
# 拉取git代码到本地
git clone https://gitee.com/dcloud/uni-preset-vue.git
# 执行命令行时替换成项目地址，运行即可创建
vue create -p ~/uni-preset-vue uniapp-demo
选择 [默认模板] 就可以了
拷贝文件
- package.json 依赖库复制到新项目 package.json
- pages、components、static、store 等目录文件复制到新项目 src 目录
安装依赖
cd uniapp-demo
# 安装sass依赖
npm install sass sass-loader
# 安装uView，安装之前项目所使用的版本
npm install uview-ui@2.0.36
main.js
import uView from 'uview-ui'
Vue.use(uView)
// 使用ES6规范引入
import {
request
} from './util/request/index.js'
// 引入请求封装
request(app)
uni.scss
@import 'uview-ui/theme.scss';
pages.json
"easycom": {
// npm安装的方式不需要前面的"@/"，下载安装的方式需要"@/"
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
// "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
}
vue.config.js
- 在 src 同级目录下创建 vue.config.js
module.exports = {
transpileDependencies: ["@dcloudio/uni-ui", "uview-ui"],
}
http请求/响应拦截器
- util/request/index.js
import {
requestInterceptors
} from './requestInterceptors.js'
import {
responseInterceptors
} from './responseInterceptors.js'
export const request = (vm) => {
requestInterceptors(vm)
responseInterceptors(vm)
}
使用ES6规范引入
H5跨域配置
- ws 要配置不然控制台会有错误警告
- disableHostCheck 属性不需要配置，默认false
"h5" : {
"title" : "商城",
"router" : {
"mode" : "hash",
"base" : "/mall/"
},
"template" : "public/index.html",
"devServer" : {
"port" : 8080,
"https" : true,
"proxy" : {
"/" : {
"target" : "https://IP:8080/",
"changeOrigin" : true,
"secure" : false,
"ws": false,
"pathRewrite" : {
"^/" : ""
}
}
}
}
}
运行与发布
# 安装依赖
yarn install
# 或
npm install
# 运行H5
yarn run dev:h5
# 或
npm run dev:h5
# 运行微信小程序
yarn run dev:mp-weixin
# 或
npm run dev:mp-weixin
# 发布H5
yarn build:h5
# 或
npm build:h5
# 发布微信小程序
yarn build:mp-weixin
# 或
npm build:mp-weixin