从零开始搭建vue3+vite2项目

想不到耶

已于 2024-11-21 13:55:21 修改

阅读量1.9k

点赞数 5

分类专栏： vue3 文章标签：前端 vue

于 2022-08-06 10:30:40 首次发布

本文链接：https://blog.youkuaiyun.com/m0_59962820/article/details/126149249

版权

本文详细介绍了从零开始搭建Vue3和Vite2项目的步骤，包括创建项目、安装SCSS、引入Element Plus、配置路由Vue Router、集成Vuex、使用Axios以及实现i18n语言切换、配置SCSS全局变量和自适应布局等关键环节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、创建项目

选择一个文件夹，用终端打开，输入：

npm init vite@latest

如下图所示，输入项目的文件名（这里是vuePro）--》选择vue--》再次选择vue

2、根据提示打开项目

依次输入以上三行命令，启动项目，画面是这个样子的⬇️

3、安装scss

⚠️注意是 sass 不是 scss ⬇️

（使用vite搭建项目只安装sass即可，不需要安装node-sass,sass-loader）

npm i sass

若是后面用scss时报错了重启一下项目

4、引入element-plus

参考官网：安装 | Element Plus

4.1 安装

npm install element-plus --save

4.2 完整引入

main.js：

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

// 引入el-icon（注意 icon 是需要额外引入的）
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

app.use(ElementPlus)

// el-icon
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

4.3 按需引入

安装：

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

main.js：（按需引入的方式引入 icon 就可以）

// 引入el-icon
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

// el-icon
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

按需引入需要在 vite.config.js 做一些配置，参考 5 ⬇️

5、vite.config.js文件

import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' // node中的内置模块
// elememt-plus按需引入才需要加上下面三行！！！！！！
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

const pathResolve = (dir) => {
    return resolve(__dirname, ".", dir)
}

const alias = {
    '@': pathResolve("src") // 别名，注意这个别漏了！！
}

alias['vue-i18n'] = 'vue-i18n/dist/vue-i18n.cjs.js'

// https://vitejs.dev/config/
export default ({ command }) => {
    const prodMock = true;
    return {
        base: './',
        resolve: {
            alias
        },
        server: {
            port: 3004, // 前端端口
            host: '0.0.0.0',
            open: true,
            // proxy: { // 前端跨域 （需要跨域开启这一段）

最低0.47元/天解锁文章