网站优化培训,餐饮行业做网站有什么好处知乎,网站的大图传不上去是怎么回事,怎样免费设计logo最近公司需要开发新版小程序#xff0c;思考了一下#xff0c;决定还是用最新的技术进行开发#xff0c;同时也能锻炼到自己#xff0c;废话不多说#xff0c;开搞#xff1a; 一.首先打开uniapp的官网#xff1a;uni-app官网
//环境安装
//全局安装vue-cli
npm instal…最近公司需要开发新版小程序思考了一下决定还是用最新的技术进行开发同时也能锻炼到自己废话不多说开搞 一.首先打开uniapp的官网uni-app官网
//环境安装
//全局安装vue-cli
npm install -g vue/cli//创建uni-app
//使用正式版对应HBuilderX最新正式版
vue create -p dcloudio/uni-preset-vue my-project//使用alpha版对应HBuilderX最新alpha版
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project//使用Vue3/Vite版
//创建以 javascript 开发的工程如命令行创建失败请直接访问 https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite.zip 下载模板
npx degit dcloudio/uni-preset-vue#vite my-vue3-project//创建以 typescript 开发的工程如命令行创建失败请直接访问 https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip下载模板
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
在这里我选择下载最后一个typescript工程选择直接访问链接下载
二.将项目打开之后使用命令行安装依赖
npm -i或者yarn
三.配置微信小程序的appid 1.在这里我碰到了json文件注释报错问题Comments are not permitted in JSON
解决方法
1.点击右下角 2.输入JSON选择第二个JSON with Comments即可 四.使用命令行运行项目
npm run dev:mp-weixin
运行成功之后可以看到dist文件夹 如图 这个时候我们打开微信开发者工具将dist/dev/mp-weixin文件夹导入进去就可以运行了。
五.这时候发现main.ts里的import App from ./App.vue;报错
解决方法
打开env.d.ts文件添加以下代码
/// reference typesvite/client /declare module *.vue {import { ComponentOptions } from vueconst componentOptions: ComponentOptionsexport default componentOptions
}六.配置全局http请求
1.创建common文件夹创建api.ts文件 2.在main.ts文件中定义全局变量注这里与vue2.0不相同
import http from ./common/api
app.config.globalProperties.$http http; 3.在代码中获取全局变量
const { $http } (getCurrentInstance() as any).proxy;
