使用vscode搭建vue项目并引用element-ui

vscode vue 文章 精帖 2021-05-10 18:39 73 0 全屏看文

1.环境准备

Visual studio code,nodejs,vue-cli,yarn


2.新建项目

1)打开Visual studio code,打开一个你想要创建项目的文件夹

2)打开集成终端如下图所示或者使用快捷键

image.png

3)在终端中输入如下命令新建项目

vue init webpack projectName

projectName为你想要取的项目名称,需要注意的是项目的名称不能大写,不然会报错。


4)在新建项目过程中需要配置下面参数

a)第一项:项目名称,可以直接按enter键

b)第二项:项目描述一个Vue.js,可以直接按enter键

c)第三项:作者名称,输入作者名称:如下图所示

image.png

d) 第四项:输入作者名称后按enter键后显示如下图选项,使用上下箭头选择,通常默认选择第一项,按enter选中

image.png

之后配置如下选项

e)第五项:是否安装Vue路由,输入Y/N

f)第六项:使用 ESLint 到你的代码;ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误。

g)第七项:选择一个预置ESLint,使用上下箭头选择

h)第八项:设置单元测 Y/N

i)第九项:设置端到端测试 Y/N

image.png

上述选项设置后选择,选择包管理工具如下所示(npm/yarn)

image.png

创建成功后最后显示如下

image.png

3.按照提示输入命令运行项目

cd projectName
npm run dev

使用浏览器打开地址http://localhost:8080/ 可以打开页面

如果你本机的8080端口占用了,可以修改 projectName/config/index.js的端口配置


4.引用element-ui

a) 第一步:安装element-ui,运行

npm i element-ui -S

安装前注意把npm/yarn设置镜像服务器(因为大部分内容要去外网下载,直连比较慢)


NPM设置成淘宝镜像

npm config set registry http://registry.npm.taobao.org/ -g


yarn设置成淘宝镜像

yarn config set registry http://registry.npm.taobao.org/ -g


b) 第二部:在项目里面引用了elemtnt-ui,打开src目录下的main.js

image.png

import {
    Button
} from 'element-ui'
Vue.use(Button)

然后就可以element-ui的组件了————————————————

版权声明:本文为CSDN博主「lifeisaclimb」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/lifeisaclimb/article/details/105632885


-EOF-