Skip to content
鼓励作者:欢迎打赏犒劳

02-vue3项目搭建

主要记录一下vue3项目搭建

创建vue3+vite项目

这里是利用vite脚手架来快速创建项目

安装vue-cli脚手架 (可忽略)

shell
npm install -g @vue/cli --force

安装vite脚手架

shell
npm install -g create-vite-app

创建 vue3 项目

shell
create-vite-app vue3-demo

nvm

整合ElementPlus

安装依赖

shell
# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

src\main.js

完整引入

js
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

测试是否正常

vue
<template>
  <el-button type="primary" >Primary</el-button>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

不同的环境执行不同的配置文件

配置文件加载

vite项目启动默认会加载配置文件。本地启动默认取的是.env.development文件, .env是公共文件

  • .env:公共环境
  • .env.development:开发环境
  • .env.production:生产环境

通过命令加载指定的配置文件

shell
"dev": "vite --mode development",
text
# .env.development 文件中
# 没有以 `VITE_` 为前缀 不会暴露出去
USER_PASSWORD = foobar 
# 可以暴露出去
VITE_APP_BASE_PATH = https://blog.share888.top/

vue文件使用

vue
<script setup>
// 直接使用import.meta.env去读取环境变量文件里面的某个属性
console.log(import.meta.env);
const VITE_APP_BASE_PATH = import.meta.env.VITE_APP_BASE_PATH;
</script>

js文件加载

官网:https://vitejs.dev/config/

其他方式:https://blog.csdn.net/qq_39505245/article/details/134332060

我在用这种方式的时候,各种报错。很烦。

除了配置文件加载之外还可以通过js文件来实现不同的配置文件加载,更加的灵活。 vite.config.js

js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
});

package.json

json
{
    "dependencies": {
      "vue": "^3.0.4"
    },
    "devDependencies": {
      "@vitejs/plugin-vue": "^5.0.4",
      "@vue/compiler-sfc": "^3.0.4",
      "vite": "^3.2.10"
    }
}

配置@路径别名

对于使用 Vite 构建的 Vue 3 项目,你需要在项目根目录下 vite.config.js 文件中配置路径别名。

js
// vite.config.js
import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
});

遇到的问题汇总

vite.defineConfig报错

TypeError: vite.defineConfig is not a function

引入vite.config.js之后,启动项目报错 nvm

vite的版本太低,升级版本即可

json
"vite": "^3.2.10"

webstorm vue项目 @/xx/xx 相对路径不能跳转到对应文件

一般情况下,我们在路由文件中写的路径都是@/components/HelloWorld.vue 这种的形式,但是不会跳转就很气人,可以设置一下让可以跳转。

1.跟目录(与src同级)下创建jsconfig.json 2.jsconfig.json 配置内容

json
{
    "compilerOptions": {
        "types": [
            "@dcloudio/types"
        ],
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "src/*"
            ]
        },
        "target": "ES6",
        "allowSyntheticDefaultImports": true
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

无法处理VUE文件

[vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.

依赖,主要下载 @vitejs/plugin-vue

json
{
    "dependencies": {
      "vue": "^3.0.4"
    },
    "devDependencies": {
      "@vitejs/plugin-vue": "^5.0.4",
      "vite": "^3.2.10"
    }
}

vite.config.js

js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
});

如有转载或 CV 的请标注本站原文地址