文章目录

• 带着基础看 vue3
• 提示
• vue3 + vite + Element Plus 构建完整项目
• 完善项目
• • 完善路由
  • 完成 vuex
  • 完善 Element Plus
  • 完善 main.js 挂载
• 项目构建完成
• vue3 demo
• • vite 构建
  • webpack 构建
• 本篇完
• 感言

带着基础看 vue3

提示

如果要用 vue3 + webpack 构建项目 请在此篇文章创建项目时 选 vue3 即可

vue3 + vite + Element Plus 构建完整项目

• 1 创建项目 my-vue-app 项目名称疑似不能用中文

npm init vite@latest my-vue-app --template vue

如图：

• 2 根据提示 进入到 my-vue-app 文件夹

cd my-vue-app

• 3 初始化 my-vue-app

npm install

• 4 启动 my-vue-app 项目

npm run dev

这就完整的创建并启动了一个 vue3 项目

完善项目

完善路由

npm install vue-router@next -S // 安装最新路由
- 路由文件(router/index.js)import {createRouter, createWebHashHistory} from 'vue-router'export default createRouter({history: createWebHashHistory(),routes: []})// todo: 挂载在 下面 main.js 文件中

完成 vuex

npm i vuex@next -S  //  安装最新vuex
- vuex(store/index.js) 文件// vue3中创建store实例对象的方法createStore()按需引入import { createStore } from 'vuex'export default createStore({state: {},mutations: {},actions: {},getters: {},modules: {}})// todo: 挂载在 下面 main.js 文件中

完善 Element Plus

npm install element-plus --save

完善 main.js 挂载

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 导入 路由
import store from './store' // 导入 vueximport ElementPlus from 'element-plus' // 导入Element Plus 
import '../node_modules/element-plus/theme-chalk/index.css' // 导入Element Plus css
// import 'element-plus/theme-chalk/index.css' // 导入Element Plus css
createApp(App).use(router).use(store).use(ElementPlus).mount('#app')

项目构建完成

如此就构建了一个完整的 vue3 + vite + element plus 项目

vue3 demo

vite 构建

vue3 + vite 的一个demo
demo 介绍：这是 vue3 + vite 的一个 管理后台 demo。 作用是根据窗口大小改变视图的伸缩。 具体作用：如-当窗口宽度低于 750px 时 根据窗口持续缩小， 内容也会跟着缩小相同比列。达到自适应的效果。(如pc端管理系统在手机浏览上操作时，会根据手机屏幕计算比例展示内容。避免错乱)。窗口超过750px 内容不作变化(如：pc端展示操作管理系统)。适用于：pc 端 一套代码兼容移动端浏，响应式改变布局。

webpack 构建

vue3 + webpack 的一个 管理后台 demo
demo 介绍： vue3 + webpack 后台初始化模板-- 一个非常简介明了，非常好用的后台模板，搭建了完整的项目环境。拉取后 npm install 一下就可以起飞了，如果有报错，请反馈。

本篇完

感言

谢谢您的耐心阅读 有不足之处 望各位看官指正 三连必回
在 vue 的长河里我们一起遨游 让我们拥有了共同的目标
在此祝您 步步高升！