[{"createTime":1735734952000,"id":1,"img":"hwy_ms_500_252.jpeg","link":"https://activity.huaweicloud.com/cps.html?fromacct=261f35b6-af54-4511-a2ca-910fa15905d1&utm_source=V1g3MDY4NTY=&utm_medium=cps&utm_campaign=201905","name":"华为云秒杀","status":9,"txt":"华为云38元秒杀","type":1,"updateTime":1735747411000,"userId":3},{"createTime":1736173885000,"id":2,"img":"txy_480_300.png","link":"https://cloud.tencent.com/act/cps/redirect?redirect=1077&cps_key=edb15096bfff75effaaa8c8bb66138bd&from=console","name":"腾讯云秒杀","status":9,"txt":"腾讯云限量秒杀","type":1,"updateTime":1736173885000,"userId":3},{"createTime":1736177492000,"id":3,"img":"aly_251_140.png","link":"https://www.aliyun.com/minisite/goods?userCode=pwp8kmv3","memo":"","name":"阿里云","status":9,"txt":"阿里云2折起","type":1,"updateTime":1736177492000,"userId":3},{"createTime":1735660800000,"id":4,"img":"vultr_560_300.png","link":"https://www.vultr.com/?ref=9603742-8H","name":"Vultr","status":9,"txt":"Vultr送$100","type":1,"updateTime":1735660800000,"userId":3},{"createTime":1735660800000,"id":5,"img":"jdy_663_320.jpg","link":"https://3.cn/2ay1-e5t","name":"京东云","status":9,"txt":"京东云特惠专区","type":1,"updateTime":1735660800000,"userId":3},{"createTime":1735660800000,"id":6,"img":"new_ads.png","link":"https://www.iodraw.com/ads","name":"发布广告","status":9,"txt":"发布广告","type":1,"updateTime":1735660800000,"userId":3},{"createTime":1735660800000,"id":7,"img":"yun_910_50.png","link":"https://activity.huaweicloud.com/discount_area_v5/index.html?fromacct=261f35b6-af54-4511-a2ca-910fa15905d1&utm_source=aXhpYW95YW5nOA===&utm_medium=cps&utm_campaign=201905","name":"底部","status":9,"txt":"高性能云服务器2折起","type":2,"updateTime":1735660800000,"userId":3}]
方案一
直接在命令行执行以下命令:
yarn create @vitejs/app
出现以下错误:
升级node版本即可:sudo n stable
再次运行命令,输入项目名称,选择vue、ts即可。
进到该项目目录下,安装依赖,执行 npm run dev 即可在本地服务器进行预览调试。
方案二
1、全局安装 vite: npm i vite -g
2、新建文件夹,执行命令:npm init vite-app
3、打开该文件夹,安装依赖,执行 npm run dev 即可预览页面
4、配置ts:npm i -S typescript
* npx tsc --init , 创建 tsconfig.json 文件
* 把根目录下的 main.js 文件名改为 main.ts
* 把根目录下的 index.html 中引入的 main.js 改为 main.ts
* 同时把 .vue 文件里的 <script> 标签中加入 lang='ts'
* 在项目根目录创建 shim.d.ts 文件,同时写入以下代码,用于配置 ts 支持识别 .vue 文件
* declare module "*.vue" { import { Component } from "vue"; const component:
Compoent; export default component; }
5、配置 router: npm i -S vue-router@next
* 在 src 目录下建立 router 目录,创建 index.ts 文件,并写入以下代码:
* import { RouteRecordRaw, createRouter, createWebHistory } from
"vue-router"; const routes: RouteRecordRaw[] = [ { path: "/", name: "Home",
component: import("../views/index.vue"), }, ]; const router = createRouter({
history: createWebHistory(process.env.BASE_URL), routes, }); export default
router;
*
修改 main.ts 文件引入 vue-router
* import { createApp } from "vue"; import App from "./App.vue"; import router
from "./router/index"; createApp(App).use(router).mount("#app");