Java Web 前端vue项目的创建（以及element UI组件的下载）

无-限

已于 2024-07-12 18:27:23 修改

阅读量467

点赞数 4

分类专栏： Java web前端文章标签：前端 vue elementui java

于 2024-07-11 09:13:21 首次发布

本文链接：https://blog.csdn.net/m0_64636041/article/details/140328499

版权

2 篇文章 0 订阅

订阅专栏

一.环境准备

安装地址：node安装

下载并安装，安装完成后查看版本号，如有则安装成功。

配置npm的全局安装路径

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm config set prefix "E:\develop\NodeJS"

注：E:\develop\NodeJS 这个目录是NodeJS的安装目录

切换npm的淘宝镜像

npm config set registry https://registry.npm.taobao.org

如果不可以可能是链接过期，自己上网搜一个。

使用管理员身份运行命令行，在命令行中，执行以下代码：

npm install -g @vue/cli

可以使用命令行：

vue create vue-demo1

或者新建一个文件夹起名为vue-demo1，然后用命令行打开。使用

vue ui

打开图形化界面，点击左下角的三个点，

点击创建，然后点击在此创建程序（注：cmd不要关掉了，否则程序就结束了）

起一个你喜欢的项目名。包管理器选择npm,然后点击下一步。

预设选择手动，点击下一步。然后勾选需要的功能，这里我们勾选一个router（初学也可以不勾选，后面可以在项目里面下载），

点击下一步，选择第一个，点击创建项目，进入项目下载过程，需要耐心等待一会。（这里可以保存一个预设名，下次直接选就可以不用再次手动配置了）。

2.运行vue项目

用vs code打开刚刚下载好的项目,点击如图所示的运行按钮。或者使用命令启动项目。（如果侧边栏没有显示出npm的可以关闭重进或者打开package.json文件或许就会显示出来了）

npm run serve

项目运行成功后，点击如下链接，就可以进入前端展示界面了。（这里占用的8080端口，可以在vue.config.js配置文件中修改端口号）。

devServer:{
    port: 7000,
  }

出来如下的显示界面，则表明vue项目可以正常运行了。

在当前工程的目录下，在命令行执行指令。

npm install element-ui@2.15.3

下载完成后在node_modules文件夹中可以找到element-UI。

在main.js文件中加入如下代码：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';


Vue.use(ElementUI);

进入element官网饿了么组件网站（包含丰富的组件，提高开发效率），复制自己喜欢的组件，粘贴到项目中，例如我们选择一个标签组件。运行就能得到想要的标签。

关注