vite+vue3+ts 创建vue3项目

vite+vue3+ts 创建vue3项目

1.打开cmd 输入下面命令后,输入项目名称,选择vue和TypeScript后,可以创建完文件,如图二显示。

npm create vite@latest

在这里插入图片描述
在这里插入图片描述
2.用vscode打开项目,安装less/scss (二者选其一)

npm add -D less

npm add -D sass 

npm uninstall --save less-loader //删除less

3.自动导入,使用之后不需要再进行引入vue中hook reactive ref

npm install -D unplugin-vue-components unplugin-auto-import

在vite.config.ts文件中:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// 自动导入vue中hook reactive ref等
import AutoImport from "unplugin-auto-import/vite"
//自动导入ui-组件 比如说ant-design-vue  element-plus等
import Components from 'unplugin-vue-components/vite';
//element
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
export default defineConfig({
  plugins: [
    vue(),
 
    //element按需导入
    AutoImport({
      //安装两行后你会发现在组件中不用再导入ref,reactive等
      imports: ['vue', 'vue-router'],
      dts: "src/auto-import.d.ts",
      //element
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      //element
      resolvers: [ElementPlusResolver()],
      //默认存放位置
      //dts: "src/components.d.ts",
    }),
  ],
 
})

4.安装router

 npm install vue-router@4 

5.在src文件夹下新建一个router文件,里面再新建一个index.ts文件,内容如下:

import { createRouter, createWebHistory } from "vue-router";
 
 
let routes= [
    {
        path: '/',
        name: 'home',
        //使用import可以路由懒加载,如果不使用,太多组件一起加载会造成白屏
        component: () => import('xxxx')
    },
    //{
        //配置404页面
        //path: '/:catchAll(.*)',
        //name: '404',
        //component: () => import(''),
    //}
]
// 路由
const router = createRouter({
    history: createWebHistory(),
    routes
})
// 导出
export default router 

6.在main.ts文件中引入:

createApp(App).mount('#app')
import { createApp } from 'vue'
import App from './App.vue' 
//routes
import router from "./routes/index"; 
 
const app= createApp(App)
 
 //routes 
 app.use(router)  
app.mount('#app')

7.安装pinia

参考链接:https://blog.csdn.net/weixin_59916662/article/details/127331094

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值