vue3笔记_创建vue3项目和集成element-plus

真的太抽象了
560 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

安装vuecli

vue提供的cli工具，具有创建一个vue项目脚手架的的功能

#安装最新版本
npm i -g @vue/cli

创建vue项目

当使用vue create hello-world这个命令在windows系统git bash里面创建项目，光标无法移动，见下图

image.png

需要使用winpty vue.cmd create hello-world命令创建项目

在出现的列表中，选择手动选择，选择Babel和Linter，其它的可以后期再加 image.png vue版本选择3.x CF11F77C-60D7-45af-9394-6400B4BA1C2E.png 只选代码检测ESLint 607E0BA3-7C3E-4ceb-99DA-A823A030A4DC.png Lint先只提示不修复 66A4C7BF-EA57-4206-96FB-A0C84EAB3964.png 配置文件放到package.json里面，不专门创建了 A931A8D1-6EE2-4788-872D-995AFB91ADE7.png

至此，项目选项完成，开始安装依赖,看到以下提示，说明创建完成，依赖安装成功。可以切换目录，运行了 53BBDAAD-AAE3-498f-830D-4F73961B530D.png

这里使用的npm做为默认包管理工具，也可以改成yarn 该配置在 用户文件夹下的 .vuerc文件，打开更改packageManager选项既可

image.png

引入element-plus

vue2的好搭档组件库是element，vue3则是element-plus

#切换到项目目录
cd hello-world
#安装element-plus
npm install element-plus --save

安装完成后，可以在package.json看到依赖

image.png dependencies是生产依赖，会打包到项目中，devDependencies是开发依赖，只在开发生效，不会打包到项目中

在main.js配置使用element-plus

#引入组件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

#使用插件
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

测试引入效果，在components文件夹下，将HelloWorld.vue加几个ep的组件，这里加几个按钮

将以下内容复制到 div容器内

<el-row class="mid">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
      <el-button>中文</el-button>
</el-row>

然后运行该项目(在vscode里面点击serve运行)

image.png

查看运行效果

image.png 这里按钮居中，是因为加了段css

#在style 里面加上如下内容
.el-row {
  display: inline-block;
  margin: 0 10px;
}

至此vue3项目已经创建完成，并引入了element-plus,后续需要路由或状态管理再继续集成

avatar
文章
阅读
粉丝