Vue-CLI项目搭建

发布于:2022-11-27 ⋅ 阅读:(347) ⋅ 点赞:(0)

在之前的vue学习中,都是在html中编写的,但是在一个vue项目中,都是以vue后缀的文件编写组件的。

创建vue项目需要node.js环境,node.js是一款后端语言。

 Vue-CLI 项目搭建

第一步:安装node.js,下载地址:下载 | Node.js 中文网 (nodejs.cn),一路下一步,安装完成后会自动添加到环境变量中,这个时候你的cmd就会多了两个命令:

  • node:进入node.js环境
  • npm:安装模块用

第二步:安装vue-cli,打开cmd窗口输入

npm install -g @vue/cli

如果下载慢,可以用以下命令:

npm install -g @vue/cli --registry=https://registry.npm.taobao.org

或者

# 先安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 以后都用cnpm替代npm使用
cnpm install -g @vue/cli

第三步:创建vue项目,会在当前目录创建。

vue create 项目名

这时候会出现配置选择,通过方向键上下选择,回车确认。

继续方向键选择,按空格选中,选中如图三个选项,回车确认。

选择vue版本,这里我选2.x

然后输入y。

选择第二个。

最后选择是否保存当前的配置选择,输入y保存,输入n取消。保存后以后创建vue项目可以直接用保存好的配置,较方便。

这时候就创建完毕了。

第三步的另外一种方式:使用图形化界面创建vue项目,打开cmd窗口输入:vue ui

运行后会出现一个地址,访问地址,创建流程如下:

第四步:运行vue项目

  • 方式一:cmd窗口cd到你创建的项目内,执行 》》》npm run serve

  • 方式二:使用pycharm、HbuildX等应用打开vue项目运行。

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到