uniapp项目迁移至vue cli

最新推荐文章于 2024-07-09 17:57:05 发布

逢生博客

最新推荐文章于 2024-07-09 17:57:05 发布

阅读量648

点赞数 4

文章标签： uni-app vue.js 前端前端框架

本文链接：https://blog.csdn.net/weixin_42607526/article/details/136028503

版权

本文详细介绍了如何使用VueCLI创建uniapp项目，包括设置模板、安装依赖、配置文件（如main.js、uni.scss、pages.json和vue.config.js）、处理ES6规范、H5跨域、http请求/响应拦截器以及部署流程。

摘要由CSDN通过智能技术生成

注意事项

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