1. 首页
  2. 文章中心
  3. vue3

vue3+vite+ts项目搭建及踩坑项目搭建可以先对文件做一个规范 创建下面的文件夹存放对应的资源引入Element UI路由配置

113 阅读 0 评论
我是靠谱客的博主 迷你招牌，这篇文章主要介绍vue3+vite+ts项目搭建及踩坑项目搭建可以先对文件做一个规范 创建下面的文件夹存放对应的资源引入Element UI路由配置，现在分享给大家，希望可以做个参考。

项目搭建

vue3的项目之前也搭建过一个 只是之前考虑简单入门就没有引入ts 这一次我们完整的使用
vue3+vite+ts
有一些环境及目录配置可以去看下面的文章
搭建一个简单的vue3项目

开始创建项目

  1. 在需要创建的项目位置打开dos窗口（shift+鼠标右键）选择在此处打开powershell窗口
  2. 输入 npm init @vitejs/app 回车
复制代码
1
2
 npm init @vitejs/app
  1. Project name: 输入项目名称
  2. Select a framework: 选择 vue
  3. Select a variant 选择vue-ts
  4. cd 项目名称
  5. npm install
  6. npm run dev

在这里插入图片描述
在这里插入图片描述

可以先对文件做一个规范 创建下面的文件夹存放对应的资源

复制代码
1
2
3
4
5
6
7
8
9
10
├── src
│   ├── api            数据请求
│   ├── assets         静态资源
│   ├── components     组件
│   ├── pages          页面
│   ├── router         路由配置
│   ├── store          vuex数据
│   └── utils          工具函数

添加别名，配置@指向src

复制代码
1
2
根更目录找到 vite.config.ts

在这里插入图片描述

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path" 
const pathResolve = (dir: string) => resolve(__dirname, dir)

export default defineConfig({
  server:{
    port: 9981 // 端口号
  },
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      "@": pathResolve("./src"),   // 别名
    }
  }
})

踩坑

当时配置完之后这两行
import { resolve } from “path”
const pathResolve = (dir: string) => resolve(__dirname, dir)
有报错
解决
path标红 提示找不到模块 ‘path’

运行下面命令完美解决

复制代码
1
2
npm install @types/node --save-dev

引入Element UI

参考Element管网安装

复制代码
1
2
3
4
5
6
7
8
9
10
11
# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

完整引入

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

复制代码
1
2
3
4
5
6
7
8
9
10
11
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

Volar 支持

如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。
我们这边是使用volar 所以需要配置一下

复制代码
1
2
3
4
5
6
7
8
// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

路由配置

  1. 安装vue-router
复制代码
1
2
npm i vue-router@4
  1. 找到在src目录下的router文件夹 然后在文件夹下添加index.ts文件
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
 
const routes: Array<RouteRecordRaw> = [
  {
    path: '/home',
    name: 'Home',
    component: () => import('@/pages/demo/home.vue')
  },
  { path: '/', redirect: { name: 'Home' } }
]
 
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
 
export default router
  1. 在main.ts中挂载
复制代码
1
2
3
4
5
6
7
8
9
10
import { createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router/index'
 
const app = createApp(App)
 
app.use(router)
app.mount('#app')

在pages文件夹下创建相应的测试文件home.vue

复制代码
1
2
3
4
<template>
    <h1>hello, world</h1>
</template>

修改App.vue 文件

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
</script>

<template>
  <router-view></router-view>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

查看页面

在这里插入图片描述

出现的问题

router.ts
在这里插入图片描述
修改之后不用别名@就不报错了
在这里插入图片描述
这时候可能会觉得是别名没起作用 但是之前报错的时候也是能打开到对应的路由页面
而且 route.ts 里面的路由配置也是用的@ 所以应该是不会有问题的

测试element UI 引入是否正确

在home页面简单的引入一个button

复制代码
1
2
3
4
5
<template>
    <h1>hello, world</h1>
    <el-button type="primary">elmentUi button </el-button>
</template>

在这里插入图片描述

之前使用入了element 和 router 所遇到过的问题 这一次没遇到

在这里插入图片描述
elment-plus 标签标红

tsconfig.ts
在这里插入图片描述

复制代码
1
2
3
4
"vueCompilerOptions": {
  "experimentalDisableTemplateSupport": true
 }

在这里插入图片描述
这个问题我网上找了好多 都没有解决
报这个错的原因应该是router版本与vue3不兼容
资料上面只说了vue3 要与router4 以上版本 但是我这边都是对的
有知道的大佬望告知解决办法

最后

以上就是迷你招牌最近收集整理的关于vue3+vite+ts项目搭建及踩坑项目搭建可以先对文件做一个规范 创建下面的文件夹存放对应的资源引入Element UI路由配置的全部内容，更多相关vue3+vite+ts项目搭建及踩坑项目搭建可以先对文件做一个规范内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(75)

相关文章

uniapp+vite+vue3+pug+stylus+tailwindcss框架搭建
uniapp+vite+vue3+pug+stylus+tailwindcss框架搭建
Python在win10下彻底解决from、import问题（导包问题）
Python在win10下彻底解决from、import问题（导包问题）
'无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称' 或 'vue不是内部或外部命令'（亲测有效）
'无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称' 或 'vue不是内部或外部命令'（亲测有效）
Vite介绍和原理解析是什么使用方法插件机制工作原理总结参考文档
Vite介绍和原理解析是什么使用方法插件机制工作原理总结参考文档
vue3+vite+ts项目搭建及踩坑项目搭建可以先对文件做一个规范 创建下面的文件夹存放对应的资源引入Element UI路由配置
vue3+vite+ts项目搭建及踩坑项目搭建可以先对文件做一个规范 创建下面的文件夹存放对应的资源引入Element UI路由配置
Vite 特性和部分源码解析
Vite 特性和部分源码解析
Vite+Vue3+TS项目创建及基本环境搭建1.vite项目搭建2.实用功能
Vite+Vue3+TS项目创建及基本环境搭建1.vite项目搭建2.实用功能
vue项目打包后自定义可更改某些参数的配置方法
vue项目打包后自定义可更改某些参数的配置方法

评论列表共有 0 条评论

立即
投稿
返回
顶部