vue3和elements创建应用.241117

一. 创建环境

1. 创建D:\code\vue 文件夹

2. vscode打开文件夹

3. 打开终端,输入

npm install -g @vue/cli
assets/vue3和elements创建应用.241117/file-20250106112711883.png

4. 配置环境变量

终端输入:npm config list找到路径
assets/vue3和elements创建应用.241117/file-20250106112721136.png

将路径加入windows环境变量
assets/vue3和elements创建应用.241117/file-20250106112744043.png

5. win11系统设置-搜索:开发者

找到powershell,启用未签名状态下,运行脚本
assets/vue3和elements创建应用.241117/file-20250106112758956.png

6. 终端输入vue -V 测试

assets/vue3和elements创建应用.241117/file-20250106112821212.png)

二. 新建VUE项目

1. Terminal输入vue create demo ,选择vue3,一路等待安装。

assets/vue3和elements创建应用.241117/file-20250106112835560.png

2. cd my-project, 然后npm run serve,OK了。

assets/vue3和elements创建应用.241117/file-20250106112851798.png

assets/vue3和elements创建应用.241117/file-20250106112901956.png

三. 安装element

想要搭建一个后台管理系统的前端页面,这样一个简单的页面是远远不够的,我们还需要丰富我们的页面,此时就可以使用到element框架了。

1. 安装element

npm install element-plus --save

2. main.js引入

import router from 'router'
import store from 'store'
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';

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

npm run serve,少啥,npm i啥
其中,我npm i了router、store、url

3. npm run serve,跑正常了

assets/vue3和elements创建应用.241117/file-20250106112921165.png

四. 愉快地玩耍

1. 在App.vue里,创建个button

<template>
  <div>
  <img alt="Vue logo" src="./assets/logo.png">
  <el-button>哈哈</el-button>
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>

assets/vue3和elements创建应用.241117/file-20250106112953061.png

posted @ 2025-01-06 11:30  中国的Amadeus  阅读(4)  评论(0编辑  收藏  举报