vue3 最详细教学篇(一)

带着基础看 vue3

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 的长河里我们一起遨游 让我们拥有了共同的目标
在此祝您 步步高升！