vue3创建项目，超级简单 vue3 + vite+ Element Plus

vue3 + Vite + Element Plus 构建项目

请耐心看完。

创建准备：检查是否安装 npm  // 安装了能看到版本号，如果没有安装 请移步>>

npm -v 

一. 创建项目

- 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

 

二. 上面流程走完项目就创建完成 下面是项目完善 

完善路由

 1.  安装最新路由：

npm install vue-router@next -S

 

 2.  路由文件(创建router 文件夹，在文件夹下创建 index.js）

import {createRouter, createWebHashHistory} from 'vue-router'
export default createRouter({

history: createWebHashHistory(),

routes: []

})

// 注意 将路由文件挂载在 main.js 文件中, 下面有示例

 

 

完善vuex

 1.  安装最新vuex

npm i vuex@next -S

   2.  路由文件(创建 store 文件夹，在文件夹下创建 index.js）

import { createStore } from 'vuex'


export default createStore({

state: {

},

mutations: {

},

actions: {

},

getters: {

},

modules: {

}

})


// 注意： 将 vuex 文件挂载在 main.js 文件中, 下面有示例

 

完善 Element Plus

 1.  安装 Element Plus

npm install element-plus --save
// 注意：挂载在 main.js 文件中

 

 完善 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




createApp(App).use(router).use(store).use(ElementPlus).mount('#app')


// 注意 假如 用不上 route / vuex / Element Plus 时，在 main.js 里不需要挂载

 

 恭喜！一个完善的vue3 项目在此就完成了。