首页 前端知识 简单上手入门级创建vue项目,vscode打开vue项目,vue使用element-ui组件

简单上手入门级创建vue项目,vscode打开vue项目,vue使用element-ui组件

2024-07-30 22:07:35 前端知识 前端哥 663 730 我要收藏

最后会放上本次教程资源

一.创建vue项目

按步骤上图

在D盘创建文件vs,在vs下创建vuedemo

 打开命令提示符

输入以上命令进入到vuedemo创建vue01

vue create vue01

选择自定义创建

空格选择以下四个  回车确认  新手建议不要选择linter/formatter,这个对语法要求较为严苛,会发生后面测试element-ui时关于4 problems (4 errors, 0 warnings)   4 errors and 0 warnings potentially fixable with the `--fix` option.的报错(已解决)

路由模式选择

错误检测方式,选择标准

检查方式:保存时进行检查

配置文件方式

是否把这些配置作为模板,选择n即可立即开始搭建

等待完成后再次进入创建好的文件vue01,输入npm run serve开始运行

复制该地址进入浏览器即可进入首页

  - Local:   http://localhost:8080/
  - Network: http://192.168.0.102:8080/

二.vscode打开vue项目

点击文件,选择打开文件夹,打开刚刚创建的项目

点击...找到终端然后选择新建终端

然后cd到vue01目录下npm run serve运行

三.使用element-ui组件

快捷键ctrl+c终止批处理操作

Element - The world's most popular Vue UI framework

进入网站复制

npm i element-ui -S

在main.js里引入element-ui

选择组件进行测试

复制代码到aboutview.vue

如果运行有报错则将 packeage.json下的 "@vue/cli-plugin-eslint": "~5.0.0",删除

在终端运行npm run serve

然后打开 http://localhost:8080/

element-ui组件导入成功

本次资源如下:

https://download.csdn.net/download/weixin_48128217/89032267?spm=1001.2014.3001.5501

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14629.html
标签
评论
发布的文章

AE、Lottie、JSON简单介绍

2024-08-12 10:08:42

VSCode配置settings.json

2024-08-12 10:08:42

JSON 格式说明

2024-08-12 10:08:34

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!