当前位置:   article > 正文

从 0 搭建 Vite 3 + Vue 3 Js版 前端工程化项目_创建一个vue3+vite+js 的项目

创建一个vue3+vite+js 的项目

之前分享过一篇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的方式,构建一个基础模板

  1. # npm 6.x
  2. npm create vite@latest my-vue-app --template vue
  3. # npm 7+, extra double-dash is needed:
  4. npm create vite@latest my-vue-app -- --template vue
  5. # yarn
  6. yarn create vite my-vue-app --template vue
  7. # pnpm
  8. pnpm create vite my-vue-app --template vue

 (2)使用vue官方脚手架,本教程使用此方式

npm init vue@latest

 二、安装UI组件库

安装css预处理器sass

  1. npm install -D sass
  2. npm add -D sass
1、在项目中安装element-plus
  1. # NPM
  2. $ npm install element-plus --save
  3. # Yarn
  4. $ yarn add element-plus
  5. # pnpm
  6. $ pnpm install element-plus
2、在mian.ts中引入并配置element-plus(完整引入)element-plus连接
  1. import { createApp } from "vue";
  2. import { createPinia } from "pinia";
  3. import ElementPlus from "element-plus";
  4. import "element-plus/dist/index.css";
  5. import App from "./App.vue";
  6. import router from "./router";
  7. import "./assets/main.css";
  8. const app = createApp(App);
  9. app.use(createPinia());
  10. app.use(router);
  11. app.use(ElementPlus);
  12. app.mount("#app");
 3、按需导入,自动导入(推荐,此教程使用此方法)以下摘自element

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

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

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

Vite
  1. // vite.config.ts
  2. import { defineConfig } from 'vite'
  3. import AutoImport from 'unplugin-auto-import/vite'
  4. import Components from 'unplugin-vue-components/vite'
  5. import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
  6. export default defineConfig({
  7. // ...
  8. plugins: [
  9. // ...
  10. AutoImport({
  11. resolvers: [ElementPlusResolver()],
  12. }),
  13. Components({
  14. resolvers: [ElementPlusResolver()],
  15. }),
  16. ],
  17. })
4、在组件中使用
  1. <template>
  2. <div class="about">
  3. <h1>This is an about page</h1>
  4. <el-button type="primary" @click="alertFun">Primary</el-button>
  5. <el-button type="success">Success</el-button>
  6. </div>
  7. <el-dialog v-model="dialogVisible" title="Tips" width="30%" :before-close="handleClose">
  8. <span>This is a message</span>
  9. <template #footer>
  10. <span class="dialog-footer">
  11. <el-button @click="dialogVisible = false">Cancel</el-button>
  12. <el-button type="primary" @click="dialogVisible = false">
  13. Confirm
  14. </el-button>
  15. </span>
  16. </template>
  17. </el-dialog>
  18. </template>
  19. <script setup>
  20. let dialogVisible = ref(false)
  21. const handleClose = () => {
  22. ElMessageBox.confirm('Are you sure to close this dialog?')
  23. .then(() => {
  24. done()
  25. })
  26. .catch(() => {
  27. // catch error
  28. })
  29. }
  30. const alertFun = () => {
  31. ElMessage({
  32. message: 'Congrats, this is a success message.',
  33. type: 'success',
  34. })
  35. dialogVisible.value = true
  36. }
  37. </script>
  38. <style>
  39. @media (min-width: 1024px) {
  40. .about {
  41. min-height: 100vh;
  42. display: flex;
  43. align-items: center;
  44. }
  45. }
  46. </style>

效果:

 5、全局配置elementPlus  size 和 zIndex 语言等
  1. <template>
  2. <!-- 汉化 element -->
  3. <el-config-provider :locale="zhCn" :size="elSize" :z-index="zIndex">
  4. <RouterView />
  5. </el-config-provider>
  6. </template>
  7. <script setup>
  8. import zhCn from "element-plus/es/locale/lang/zh-cn";
  9. const zIndex = 3000, elSize = 'default';
  10. </script>
  11. <style scoped></style>

三、安装自动导入插件

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/674575
推荐阅读
相关标签
  

闽ICP备14008679号