uniapp项目迁移至vue cli

目录

• 相关资源
• 注意事项
• 安装vue cli
• 使用uni-preset-vue模板创建uniapp
• 拷贝文件
• 安装依赖
• main.js
• uni.scss
• pages.json
• vue.config.js
• http请求/响应拦截器
• H5跨域配置
• 运行与发布

相关资源

• uni-preset-vue 源码
• uniapp 官网
• uView2 官网
• iconfont 官网
• Vue CLI 官网
• ES6 教程

注意事项

• 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
# uView 1.8.8
npm install uview-ui@1.8.8

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