vue3.0 vite,vite vue3 typescript
本文主要介绍了轻快地创建一个标准vue3 ts pinia项目，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
目录
【01】使用的故事创建项目：【02】在项目中使用皮尼亚【03】添加某视频剪辑软件路由器【04】安装按需自动导入插件【05】 添加元素加组件库【06】添加萨斯【07】安裝较美丽和eslint1 .安装依赖项使用轻快地创建一个标准vue3 ts pinia项目的实现示例
【01】使用的 Yarn创建项目：
1、执行命令
故事创建邀请我的应用程序-模板vue-ts
3、cd my-vue-app //进入到项目
4、纱线//安装依赖
5、纱线开发//运行项目
vite.config.ts
从"路径"//导入路径需要安装@类型/节点并在tsconfig.node.json的编译器选项中配置allowSyntheticDefaultImports :true
从“维特”导入{ defineConfig }
从@vitejs/plugin-vue 导入某视频剪辑软件
函数_解析（目录){
返回path.resolve(__dirname，dir)；
}
//https://vitejs.dev/config/
导出默认定义配置({
插件：[vue()]，
服务器：{
主机："0.0.0.0",//监听本地所有互联网协议(互联网协议的缩写)
端口：3010 //项目端口
},
解决：{
别名：{
@: _resolve(src) //别名
}
}
})
【02】在项目中使用pinia
皮尼亚官网
1.安装皮尼亚
纱线添加针
2.引用到项目
从“vue”导入{ createApp }
从导入应用程序 App.vue
从"皮尼亚"//导入{ createPinia }导入皮尼亚
const app=createApp(App)
app.use(createPinia()) //注册皮尼亚
app。装载(应用数量)
3.使用皮尼亚演示
//./src/stores/counterStore.ts
从“皮尼亚”导入{ defineStore }，
const useCounterStore=defineStore( counterStore ，{
状态：()=({
计数器：0
})
})
//设置中使用
从导入{ useCounterStore }./商店/柜台商店
导出默认值{
setup() {
const counterStore=useCounterStore()
返回{柜台商店}
},
计算值：{
tripleCounter() {
返回counterStore.counter * 3
},
},
}
【03】添加vue-router
1.安装路由器
纱线添加vue-路由器
2.如何使用
1).创建路由器
//src/router/index.ts
从" vue路由器"导入{ createRouter，createWebHashHistory，RouteRecordRaw }。
常量路由：RouteRecordRaw[]=[
{
路径："/login "，//浏览器访问地址
名称：登录，
component:()=import(/* webpackChunkName: log in */new URL(./pages/Login/index.vue ，import.meta.url).href)，
伴侣：{}
}
]
const router=createRouter({
history: createWebHashHistory()，
路线，
})
导出默认路由器
2).引用到项目
//main.ts
从导入路由器。/路由器
app.use(路由器)
【04】 安装按需自动导入插件
1.首先需要安装拔出-自动导入和拔下组件插头两个插件
-拔下插头-自动导入：自动导入api [github链接](https://github。com/ant fu/取消浮动-自动导入)
-拔出某视频剪辑软件组件：自动导入使用的组件【github链接](https://github。com/ant fu/unpluking-vue-components)
纱线添加拔出-自动导入拔出-真空-组件-D
2.配置vite.cinfig.ts
从"拔出-自动导入/邀请"导入自动导入
从"拔掉组件插头/vite "导入组件
导出默认定义配置({
插件：[
//自动导入应用程序接口方法
自动导入({
进口：[ //自动导入应用程序接口配置
vue ，
vue-路由器，
皮尼亚，
],
解析器：[],//自定义解析器
dts: src/打字/自动导入。 d . ts ，//导入存放地址
}),
//自动导入组件
组件({
解析器：[],//自定义解析器
dts: src/打字/组件。 d . ts ，
}),
]
})
【05】 添加element-plus组件库
1.先安装依赖包
纱线添加元素-还有
2.自动导入样式和组件
1).首先你需要安装拔下组件插头和拔出-自动导入这两款插件
纱线添加拔出-真空-组件拔出-自动-导入-D
2).配置到轻快地
//vite.config.ts
从"拔出-自动导入/邀请"导入自动导入
从"拔掉组件插头/vite "导入组件
从"拔出真空电子元件/分解器"导入{ ElementPlusResolver }
导出默认定义配置({
插件：[
//自动导入元素加相关函数，如：ElMessage，ElMessageBox.（带样式)
自动导入({
解析器：[ElementPlusResolver()]，
}),
//自动导入元素加组件
组件({
解析器：[ElementPlusResolver()]，
}),
],
})
3.元素加图标库
1).安装依赖包
//安装包
纱线添加@element-plus/icons-vue
2).自动导入图标组件配置
//使用拔出图标和拔出-自动导入自动从将…最小化导入任何图标集合
纱线添加拔出-自动导入拔出-图标-D
//vite.config.ts
从“维特”导入{ defineConfig }
从@vitejs/plugin-vue 导入某视频剪辑软件
从"拔出-自动导入/邀请"导入自动导入
从"拔掉组件插头/vite "导入组件
从"拔出真空电子元件/分解器"导入{ ElementPlusResolver }
//自动导入元素图标
从"拔出图标/邀请"中导入图标
从"拔出图标/解析器"导入图标解析器
从" vite-插件-检查"导入检查
const path=require( path )；
函数_解析（目录){
返回path.resolve(__dirname，dir)；
}
//https://vitejs.dev/config/
导出默认定义配置({
插件：[
vue()，
//自动导入元素加相关函数，如：ElMessage，ElMessageBox.（带样式)
自动导入({
解析器：[
ElementPlusResolver()，
//自动导入图标组件
IconsResolver({
前缀：图标，
}),
],
dts: path.resolve(_resolve(src )， auto-imports.d.ts )，
}),
//自动导入元素加组件
组件({
解析器：[
//自动注册图标组件
IconsResolver({
启用的集合：[ep]，
}),
ElementPlusResolver()]，
}),
图标({
autoInstall: true，//是否自动加载
}),
Inspect()，
],
服务器：{
主机："0.0.0.0",//监听本地所有互联网协议(互联网协议的缩写)
端口：3010 //项目端口
},
解决：{
别名：{
@: _resolve(src) //别名
}
}
})
3).使用方法
模板
我-呃-添加-位置/
IEpRefresh /
/模板
【06】添加sass
1.安装
纱线添加sass sass-loader -D
2.配置厚颜无耻全局变量
//vite.config.ts
导出默认值{
css:{
预处理程序选项：{
scss: {
附加数据：“@ import”./src/assets/CSS/mixin。scss ；,
},
},
}
}
【07】 安裝prettier 和 eslint
1.安装依赖项
//安裝更漂亮-
纱线添加漂亮eslint-config-漂亮eslint-插件-漂亮-D
//安裝埃斯林-
yarn add eslint eslint-plugin-vue eslint-config-Airbnb-base eslint-plugin-import @ typescript-eslint/eslint-plugin @ typescript-eslint/parser-D
2.根目录添加。prettierrc.js文件
//.prettierrc.js
exports.modules={
//设置强制单引号
单引号：没错，
autoFix: false，
打印宽度：140,
半：假，
尾随逗号：无，
箭头父母："避免",
结束脱机：如果，
};
3.根目录添加。eslintrc.js文件
埃斯林特官网
//.eslintrc.js
模块。导出={
环境：{
浏览器：没错，
es2021:对，
},
扩展：[
插件：vue/vue 3-基本，
airbnb-base ，
@ vue/typescript/推荐，
@ vue/prettle ，
@ vue/appeller/@ typescript-eslint ，
],
语法分析选项：{
ecmaVersion:"最新",
解析器：" @typescript-eslint/parser "，
源类型："模块",
},
插件：[vue ， @typescript-eslint]，
规则：{
vue/no-multiple-template-root : off ，//关闭多根节点的校验vue3可使用多個根節點
引号：[error ， single]，//引号规则为："单引号",否则一律按照"错误"处理（你也可以改成警告试一下)
},
};
到此这篇关于轻快地创建一个标准vue3 ts pinia项目的文章就介绍到这了，更多相关轻快地创建vue3 ts pinia内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。