vue3脚手架安装

最新推荐文章于 2024-08-08 11:19:55 发布

宝拉不想努力了

最新推荐文章于 2024-08-08 11:19:55 发布

阅读量5.2k

点赞数 1

分类专栏：笔记 vue.js

本文链接：https://blog.csdn.net/weixin_41056807/article/details/118569805

版权

笔记同时被 2 个专栏收录

37 篇文章 1 订阅

订阅专栏

vue.js

31 篇文章 0 订阅

订阅专栏

本教程指导如何从头开始设置Vue3项目，包括安装Node.js和Vue CLI3，然后通过自定义配置创建项目，选择合适的预处理器、代码验证和热更新模式。最后，演示如何引入和配置Element Plus UI库，以便在Vue3项目中使用。

摘要由CSDN通过智能技术生成

一.准备

1.官网链接安装node
检查node 版本node -v
2.全局安装vue-cli3.0脚手架
卸载：如果已经全局安装了旧版本的vue-cli(1.x 或 2.x)，需要先卸载：npm uninstall vue-cli -g
安装：npm install -g @vue/cli

查看vue版本：vue -V
3.创建vue3项目

二.创建vue3项目

1.创建项目名称编写 vue create proname
注意：项目名称不支持大写字母

2.输入命令选择选项（使用↑ ↓切换选项）
在这里插入图片描述
Manually select features 自定义创建，按回车键进入下一步

空格选择哪几项
在这里插入图片描述
3.选择要创建的vue的版本，我们选3.x

4.是否使用history路由模式(不带#号的)，输入 n

5.选择css 模式，我们选择 node-sass
css 预处理器，node-sass是自动编译实时的，dart-sass需要保存后才会生效。

6.代码验证模式，我们选择最后一个 ESLint + Prettier
在这里插入图片描述
7.热更新模式，选 Lint on save 保存的时候就热更新

8.配置文件存放在单独的文件里选 In dedicated config files

9.是否保存创建的选项，保存的话，下次创建也会按这个选择来创建，先选择 n 不保存

等待项目创建完成
在这里插入图片描述
项目创建完成

指令启动：npm run serve

三.element-plus引入

指令：npm install element-plus --save

main.js中引入组件

import { createApp } from "vue";
import App from "./App.vue";
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import router from "./router";
import store from "./store";

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