大前端学习之旅(8)-本地搭建VUE开发环境(vite+vue-cli)

举报
@Wu 发表于 2021/08/30 17:10:59 2021/08/30
【摘要】 本地搭建VUE开发环境

Vue.js是现在比较优秀的Web前端框架,下面开始从零开始搭建一个Vue3项目。流程如下:

一、安装node.js
1.进入node.js官网下载相应安装包:https://nodejs.org/en/

image-20210830164153605.png

注:这里建议选择14.17.5 版本。

安装过程没有什么要注意的地方,直接安装到自己想安装到的目录里面就可以了

二、确认Nodejs 是否安装成功

1、打开命令行,输入node -v 来判断是否安装成功

image-20210830164405156.png

2、在安装node的时候,npm包管理器会自动安装,我们在命令输出 npm -v 看看是否安装成功
image-20210830164513123.png

3、安装vue-cli 脚手架

yarn global add @vue/cli
# 或
npm install -g @vue/cli

安装完成后,使用vue-V(注意是大写V)查看是否安装成功

image-20210830164820836.png

三、使用vite2和cue-cli创建本地项目

1、创建项目文件夹

2、进入项目文件夹,在地址栏输入CMD 调出命令窗口

image-20210830165231310.png

3、使用一下命令开始安装

npm init vite 

image-20210830165501668.png

4、配置项目名称-需要注意的是,项目名称需要小写

image-20210830165721064.png

5、输入名称后回车进入下一步,通过上下键移动到vue 上,空格选中

image-20210830165942866.png

6、选择是否使用TS,建议选择TS,空格选中,完成初始化配置
image-20210830170049569.png

image-20210830170151576.png

7、根据命令,一次执行,开始本地化安装

image-20210830170259359.png

在安装过程中,需要下载,耐心等待即可

安装完成截图

image-20210830170348459.png

启动本地项目,等待项目启动完成,可以看到项目的访问地址

image-20210830170444299.png

8、访问页面,可以看到页面正常访问,到此项目初始化搭建完成
image-20210830170545930.png

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。