方案一

直接在命令行执行以下命令:
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");
 

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:766591547
关注微信