vue3 ts开发,vue3 ts项目实战
当市场上的主流组件库不能满足我们的业务需求时，那么我们就有必要开发一套属于自己团队的组件库。下面文章主要介绍一个基于vue3 ts vite项目的相关资料，有需要的朋友可以参考一下。
目录
前言环境准备使用vite快捷方式搭建，npm使用yarn安装并依赖启动项目修改Vite配置文件，找到根目录vite.config.ts文件，打开集成路由集成Vuex，添加元素ui集成axios集成SassVue3使用总结
前言
基于Vue3已经成为默认版本，目前的项目还没有用vue3开发，最近又有了一个全新的项目，用vue3开发项目必然是未来的一个趋势。
我们来记录一下如何使用Vue3 ts vite从0开始构建一个项目。
环境准备
Nodejs version=12使用node -v查看节点版本
或者将Nodejs升级到最新的稳定版本npminstall -g n sudo n stable。
使用Vite快捷搭建
使用npm
npm init @vitejs/app
使用yarn
yarn create @vitejs/app
按照提示完成项目初始化。
初始化项目后，您可以看到如上所示的项目结构。
安装依赖
n安装或纱线安装
启动项目
Nprndev或纱线dev
修改vite配置文件
找到根目录vite.config.ts文件打开
添加别名，将@配置为指向src
从“vite”导入{ define config }；
从 @vitejs/plugin-vue 导入vue；
从“路径”导入{ resolve }；
const path resolve=(dir:string)=resolve(_ _ dirname，dir)；
导出默认定义配置({
插件：[
vue()
],
解决：{
别名：{
@: pathResolve(。/src )，//别名
}
}
})按需导入元素ui
首先，您需要安装两个插件：unplugin-vue-components和unplugin-auto-import。
NPM install-D unplugin-vue-组件unplugin-自动导入
然后在vite.config.ts中添加以下配置
从“unplugin-auto-import/vite”导入自动导入；
从“unplugin-vue-components/vite”导入组件；
从“unpluk in-vue-components/resolvers”导入{ ElementPlusResolver }；
导出默认定义配置({
插件：[
自动导入({
解析器：[ElementPlusResolver()]
}),
组件({
解析器：[ElementPlusResolver()]
})
]
})包装配置
导出默认定义配置({
构建：{
目标： es2015 ，//主要用于兼容较低版本的浏览器。可以解决chrome65版本打包发布到服务器时的空白页问题(主要是因为不兼容try catch)
CSGET: Chrome65 ，//兼容早期浏览器上的样式问题
资产目录：。/assets ，//，//打包配置路径
汇总选项：{
输入：{//主要用于配置多个页面。
平台：resolve(__dirname， platform.html )，
merchant: resolve(__dirname， merchant.html )
}
}
}
})
集成路由
安装vue路由器
Npivue-router @ 4在src目录下添加路由器文件夹，然后在文件夹下添加index.ts文件。
从“vue-router”导入{ createRouter，createWebHashHistory，RouteRecordRaw }
const routes:ArrayRouteRecordRaw=[
{
路径：“/home”，
姓名：家，
组件：()=导入( @/views/home.vue )
},
{路径：/，重定向：{ name: Home } }
]
const router=createRouter({
history: createWebHashHistory()，
路线
})
导出默认路由器
当然，在配置路由时，也可以将侧边栏组件提取为公共组件。配置方式与vue2集成路由方式一致，增加了children属性。
安装在main.ts
从“vue”导入{ createApp }
从“@/App.vue”导入应用程序
从“@/router/index”导入路由器
const app=createApp(App)
app.use(路由器)。挂载(#app)
集成Vuex
安装vuex@next
NPI VUEX @ NEXT在src文件夹下添加store文件夹，然后在文件夹下添加index.ts文件。
从“vuex”导入{ createStore }
导出默认的createStore({
状态：{
计数：0
},
突变：{
setCount(状态，计数){
状态。计数=计数
}
},
动作：{
getCount({ commit }){
提交( setCount ，xxx)
}
}
})在主页面中挂载
从“vue”导入{ createApp }
从" @/App.vue "导入应用程序
从" @/路由器/索引"导入路由器
从" @/商店/索引"导入商店
const app=createApp(App)
app.use(路由器)。使用（存储)。挂载(#应用程序)
添加element ui
上面讲解轻快地配置文件的时候已经提到怎么按需引入元素了
现在只需要在主页面文件中挂载元素即可
因为元素加默认是英语所以如果在项目中需要使用的是中文的话，可参加以下配置
在主页面文件中添加
从“vue”导入{ createApp }
从" @/App.vue "导入应用程序
从“元素加”导入ElementPlus
从" element-plus/es/locale/lang/zh-cn "导入中国
从" @/路由器/索引"导入路由器
从" @/商店/索引"导入商店
const app=createApp(App)
app.use(ElementPlus，{locale:zhCn})
app.use(路由器)。使用（存储)。挂载(#应用程序)
还有一点需要注意的是，如果您使用拔出元素+并且只使用组件API，您需要手动导入样式
如果系统中会经常用到ElMessage、ElMessageBox等api，可以主页面文件中添加以下样式，不然会导致样式问题
导入element-plus/es/components/message/style/CSS
导入 element-plus/es/components/messagebox/style/CSS
集成axios
安装爱可信
npm i axios添加全局的请求工具在科学研究委员会下新建一个实用工具文件夹，文件夹下面添加一个http.ts文件
从" axios "导入爱可信
从“元素加”导入{ ElMessage }
const BASE _ URL=//请求接口全球资源定位器(统一资源定位器)如果不配置则默认访问链接地址
const TIME _ OUT=//接口超时时间
const instance=Axios.create({
baseURL:BASE_URL，
超时：超时
})
//可以添加一个爱可信的全局配置
实例。默认值。标题。post={
"内容类型":"应用程序/x-www-form-urlencoded "
}
//添加请求拦截器
实例。截击机。请求。使用((配置)={
//可以在此处添加一些共有的请求拦截
.
返回配置
},(错误)={
返回承诺。拒绝(错误);
})
//添加响应拦截器
实例。截击机。回应。使用((响应)={
const res=response.data
//在此处添加一些响应拦截
.
},(错误)={
返回承诺。拒绝(错误);
})
导出默认实例；使用爱可信在科学研究委员会下新建一个应用程序接口的文件夹，在文件夹下添加user.ts文件
从" @/utils/http "导入$ http
//添加用户登录请求数据如果约定好可以添加分时（同分时)接口类型
export const userLogin=(data:any)={
return $http({
网址：“xxx”，
方法： post ，
数据
})
}
在需要使用这个接口的页面进行引入即可例如在login.vue中
脚本语言
从" @/API/用户"导入{用户登录}
/脚本
集成Sass
安装厚颜无耻
npm i sass -D使用在。某视频剪辑软件文件中
样式lang=scss
.//此处可以用厚颜无耻语法编写
/风格
Vue3 使用
在vue3中去除了过滤用法，如果需要用到，可以自行实现
生命周期函数
脚本语言
导入{
在安装时，
定义组件
}来自vue ；
导出默认定义组件({
setup(){
//添加一个方法
const getList=()={
.
}
已安装(获取列表)
返回{
getList //如果在模板中使用到这个方法，需要返回
}
}
})
/脚本响应式数据
在vue3中可以通过裁判员和反应的来创建一个响应式数据，如下：
通常使用裁判员来将一个原始数据类型转换成带有响应式特性的数据类型（也可以用来初始化对象类型)
通常使用反应的来赋予对象响应性特性
模板
差异
p您好，{{ name }} /p
El-button @ click= handle click /El-button
/div
/模板
脚本语言
从“vue”导入{ ref，reactive，define component }；
const name=ref()；//初始化名字为一个空的字符串
const handleClick=()={
Name.value=lemon //需要注意的是，这在修改值时并不适用。
}
导出默认定义组件({
setup(){
//
返回{
Name //返回名称
}
}
})
/脚本
用ref创建响应式数据时不需要使用这个，但是应该使用name.value来表示数据的值。
初始化数据
选项可以用来初始化vue2中的数据，但是vue3没有这个属性。
//首先，您可以定义一个方法来返回初始化数据
const formData=()={
返回{
用户名：，
密码：“”
}
}
//初始化页面显示数据
const form=reactive(formData())
//将数据重置为初始化状态
Object.assign(form，formData())路由用法
Vue中有以下两种方法
从“vue”导入{ useRoute，user outer }；
const route=user route()；//route表示当前路由。
导出默认定义组件({
setup(){
Const router=useRouter() //用于路由跳跃
返回{}
}
})
UseRouter()必须放在setup方法的顶部，否则该值未定义。
介绍组件
组件的引入方式与vue2相同。
从“@/layout/index”导入布局
导出默认定义组件({
组件：{
布局
}
})使用vuex
Vue3提供了useStore方法。
从“vue”导入{ use store }；
导出默认定义组件({
setup(){
const store=useStore() //
返回{}
}
})计算和道具使用
Vue3提供了计算方法
//基本用法
从“vue”导入{ computed }；
导出默认定义组件({
setup(){
//
const name=computed({
返回XXX
})
返回{
名字
}
}
})
Computed还可以用于使用v-model双向数据绑定函数(例如，页面弹出框的显示和关闭)。
它需要与props emit一起使用。
从“vue”导入{ computed }；
导出默认定义组件({
道具：{
模型值：{
类型：布尔型，
默认值：false
}
}
发出：[update:modelValue]，
设置(道具，{ emit }){
//
const dialogVisible=computed({
Get: ()=props.modelvalue，//setup函数的第一个参数是props。
set:(newVal)={
发出( update:modelValue ，newVal)
}
})
返回{
对话框可见
}
}
})
使用v-model在其他地方引用该组件。
手表监控使用
Vue3提供了观察方法。
从“vue”导入{ watch，ref }
const name=ref( )
导出默认定义组件({
设置(道具){
//name也可以添加一个方法()=props.name
手表(名称，()={
//可以添加异步请求。
})
}
})
总结
基于以上，可以大致形成一个基于vue3元素vite的基本后台管理系统。还有其他比如配置eslint代码规范，可以自己添加，还有Vue3的其他高级用法，会在其他文章中介绍。
希望以上内容对没有接触过vue3开发的人有所帮助。
这就是这篇关于vue3 ts vite项目的文章。更多关于vue3 ts vite项目建设的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。