vue3+element plus创建vue-cli脚手架工程

首先,需要下载node.js!!下载地址:Node.js (nodejs.org)

创建vue-cli脚手架工程

1.如果之前安装过vue2的版本,首先卸载vue2,用管理员权限打开cmd窗口,输入:

npm uninstall vue-cli -g
如图所示则旧版vue-cli已被删除
​​

 2.安装新版vue-cli脚手架:

npm install -g @vue/cli
vue3+element plus创建vue-cli脚手架工程_第1张图片 如图所示在新版vue-cli安装成功

 3.安装完成之后查看当前脚手架版本:

vue -V
我的版本为5.0.8(版本略高或略低没有影响)

 4.完成上述步骤之后开始构建项目,命令行输入vue create "项目名称":

vue create vue-element-plus

回车之后进入如下界面:

 这里可以看个人需要选择(嫌麻烦直接选择vue 3),我这里选择Manually select features(自由配置),下面是我个人的配置:

vue3+element plus创建vue-cli脚手架工程_第2张图片 Linter/Formatter插件会检查你的代码变量定义后是否使用(如果没有使用有时会报错)

vue3+element plus创建vue-cli脚手架工程_第3张图片 3. x是用vue3.0版本;2. x使用vue2,0版本
vue3+element plus创建vue-cli脚手架工程_第4张图片 选择In package.json

vue3+element plus创建vue-cli脚手架工程_第5张图片 输入 n

之后会安装项目(首次创建工程可能会有额外的配置选项),安装完成如下:

vue3+element plus创建vue-cli脚手架工程_第6张图片

 依次输入在安装结束之后命令行弹出的两条蓝色语句,则启动服务:

vue3+element plus创建vue-cli脚手架工程_第7张图片

 启动完成后会返回一个端口,通过在网页的网址栏输入端口进入项目:

vue3+element plus创建vue-cli脚手架工程_第8张图片

 或者找到该项目所在的文件夹,直接导入到编译软件中(vscode、HbuilderX等),即可对该项目进行开发。

 vue3+element plus创建vue-cli脚手架工程_第9张图片

你可能感兴趣的:(vue3+element,plus,vue.js,前端)