广州企业网站,德州宁津网站建设,折叠彩页设计,莱芜区宣传部网站之前分享过一篇vue3+ts+vite构建工程化项目的文章，针对小的开发团队追求开发速度，不想使用ts想继续使用js，所以就记录一下从0搭建一个vite+vue3+js的前端项目，做记录分享。 技术栈 Vite 3 - 构建工具 Vue 3 Vue Router - 官方路由管理器 Pinia - Vue Store你也可以选择vue… 之前分享过一篇vue3+ts+vite构建工程化项目的文章，针对小的开发团队追求开发速度，不想使用ts想继续使用js，所以就记录一下从0搭建一个vite+vue3+js的前端项目，做记录分享。 技术栈 Vite 3 - 构建工具 Vue 3 Vue Router - 官方路由管理器 Pinia - Vue Store你也可以选择vuex element-plus - UI组件库 Sass- CSS 预处理器 Axios - 一个基于 promise 的网络请求库，可以用于浏览器和 node.js Vscode - 一个还挺好用的开发工具 一、项目的基础搭建
1、构建有多种方式，本次示例选择vue官方脚手架工具create-vue 构建的
（1）使用vite的方式，构建一个基础模板
# npm 6.x
npm create vite@latest my-vue-app --template vue# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue# yarn
yarn create vite my-vue-app --template vue# pnpm
pnpm create vite my-vue-app --template vue
（2）使用vue官方脚手架，本教程使用此方式
npm init vue@latest 二、安装UI组件库
安装css预处理器sass
npm install -D sass
或
npm add -D sass
1、在项目中安装element-plus
# NPM
$ npm install element-plus --save# Yarn
$ yarn add element-plus# pnpm
$ pnpm install element-plus
2、在mian.ts中引入并配置element-plus（完整引入）element-plus连接
import { createApp } from "vue";
import { createPinia } from "pinia";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";
import router from "./router";import "./assets/main.css";const app = createApp(App);app.use(createPinia());
app.use(router);app.use(ElementPlus);app.mount("#app");
3、按需导入，自动导入（推荐，此教程使用此方法）以下摘自element
首先你需要安装unplugin-vue-components和unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import
然后把下列代码插入到你的Vite或Webpack的配置文件中
Vite
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})
4、在组件中使用
templatediv class="about"h1This is an about page/h1el-button type="primary" @click="alertFun"Primary/el-buttonel-button type="success"Success/el-button/divel-dialog v-model="dialogVisible" title="Tips" width="30%" :before-close="handleClose"spanThis is a message/spantemplate #footerspan class="dialog-footer"el-button @click="dialogVisible = false"Cancel/el-buttonel-button type="primary" @click="dialogVisible = false"Confirm/el-button/span/template/el-dialog
/template
script setup
let dialogVisible = ref(false)
const handleClose = () = {ElMessageBox.confirm('Are you sure to close this dialog?').then(() = {done()}).catch(() = {// catch error})
}
const alertFun = () = {ElMessage({message: 'Congrats, this is a success message.',type: 'success',})dialogVisible.value = true
}
/script
style
@media (min-width: 1024px) {.about {min-height: 100vh;display: flex;align-items: center;}
}
/style效果： 5、全局配置elementPlussize和zIndex 语言等
template!-- 汉化 element --el-config-provider :locale="zhCn" :size="elSize" :z-index="zIndex"RouterView //el-config-provider
/templatescript setup
import zhCn from "element-plus/es/locale/lang/zh-cn";
const zIndex = 3000, elSize = 'default';/script
style scoped/style
三、安装自动导入插件
