文章目录
带着基础看 vue3
构建项目
在项目中去看vue3 vue2 差异是不错得选择
vue3 + webpack 构建项目
如果要用 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' // 导入 vuex
import 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 的长河里我们一起遨游 让我们拥有了共同的目标
在此祝您 步步高升!