vite + vue3 + elementPlus + scss + router4 + vuex项目模板搭建

vite + vue3 + elementPlus + scss + router4 + vuex项目模板

一、本地项目vite项目搭建

1. 项目搭建(基于模板搭建)

注意：Vite 需要 Node.js 版本 >= 12.0.0

npm init @vitejs/app

以下是上面命令的简约命令

# npm 6.x
npm init @vitejs/app my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init @vitejs/app my-vue-app -- --template vue

# yarn
yarn create @vitejs/app my-vue-app --template vue

2. vite脚手架搭建项目

  npm init vite-app <project-name>

3. 基于模板搭建和脚手架搭建的区别

https://blog.csdn.net/helloxiaoliang/article/details/117093912

二、关联远程仓库

1. 本地项目仓库化

  git init // 本地项目git初始化

2. 关联远程仓库

  git remote add origin 远程仓库地址  // 关联远程仓库地址

此时, 本地代码推送不到远程！
报错：fatal: refusing to merge unrelated histories
原因：本地仓库和远程仓库实际上是独立的两个仓库。使用git clone方式没有此问题
解决：git pull origin master --allow-unrelated-histories

三、ElementPlus 配置

1. 安装

  npm install element-plus --save

2. 全局引入

/**
 * main.js
*/
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)

3. 按需引入

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

/**
 * vite.config.ts
*/
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {
    ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default