Vue_cli脚手架安装及创建运行一个项目

从零开始安装脚手架并创建运行第一个项目

脚手架的实质就是通过命令生成一个包含一整套vue项目文件结构的项目模板

第一步:下载依赖包(配置环境)

百度搜索node.js或直接进入https://nodejs.org/en/link.
node.js实质为包管理器,就不多介绍了
安装完成后,cmd打开黑窗。输入node -v回车查看 node.js 的版本;再输入npm -v回车查看npm版本

cnpm淘宝镜像

前面说到npm。但是实际操作中不建议使用,因为npm所属于国外网站,或者说里面的包资源属于国外。总之实际开发中用npm很慢。为了解决这个问题,淘宝首先把那些包资源获取了过来,当我们这些国内用户想要使用时就可以通过cnpm直接从国内获取,这样效率就高得多。

安装淘宝镜像

同样的打开黑窗然后输入:
npm install -g cnpm --registry=https://registry.npm.taobao.org
最后依旧是输入cnpm -v查看是否安装成功

第二步:安装vue.cli

此时,打开百度搜索vue.cli或直接进入https://cli.vuejs.org/link.,之后就可以查看具体步骤
具体操作如下:
1.可先在黑窗中输入 npm uninstall vue-cli -g,删除旧的cli版本(没有就不必操作此步骤)
2.输入npm install -g @vue/cli命令来安装脚手架;如果使用的是cnpm则输入cnpm install -g @vue/cli。注意:如果是MAC系统,需要在命令前加sudo
3.此时可以访问vue命令或者执行vue --version命令来检查是否安装成功。(可通过执行npm -version或者cnpm -version来检查npm或cnpm安装情况)

第三步:安装webpack

具体安装可参考webpack中文网
https://www.webpackjs.com/guides/installation/link.
webpack是代码编译工具,脚手架就是通过它来编译代码的。它分析你的项目结构,找到JS模块以及其它的一些浏览器不能直接运行的拓展语言,并将其打包为合适的格式以供浏览器使用。它的实质也是一堆复杂的JavaScript代码和一大堆依赖包

全局安装:

npm install --global webpackcnpm install webpack-cli -g

本地安装:(推荐)

npm install --save-dev webpack-cli
注意:
对以上安装可通过webpack -v检查安装是否成功

第三步:创建项目

1.在黑窗口中输入vue create projrct-name回车,注意:如果记不住此命令可执行vue -h获取提示,其中projrct-name为项目文件夹名称,可自定义。且创建项目前最好选取合适的路径。
2.此时黑窗口中会出现下图所示情况
在这里插入图片描述
通过方向键和空格键选择Manually select features回车
3.紧接着会出现下图所示内容在这里插入图片描述
勾选你所需要的插件(初学者可直接回车下一步或仅仅选取 Babel)
4.当出现下图所示内容时在这里插入图片描述
选择倒数第二项(标准配置)回车
5.在这里插入图片描述
直接回车下一步
6.在这里插入图片描述
选择In package.json回车
7.是否将本次的框架保存为模板在这里插入图片描述
建议输入n,然后回车。如果输入y回车,当你再次创建时,到了第二步就会出现你所命名的项目模板
8.此时等待安装,完成后会出现下图内容
在这里插入图片描述
这预示着项目搭建的完成。参照蓝色的命令行,先执行cd project-name回车,跳转到项目文件夹;再执行npm run serve回车,运行项目。
9.当出现图片中所示内容时,可复制链接在本地浏览器搜索打开。此时将会展示项目内容在这里插入图片描述
10.最后Ctrl+C关闭该项目

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值