怎么使用脚手架做出vue项目框架

node.js环境

正常去node官网下载node,建议12.几的版本,其他版本容易出问题。
下载完后,可以在cmd终端中输入node -v,npm -v查看下载的版本。

安装cnpm

在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然后等待.淘宝镜像库可以使下载的依赖模块更快速。

安装vue-cli脚手架构建工具

在命令行中运行命令 npm install -g vue-cli ,然后等待安装完成。
通过以上三部,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。
在你建项目的文件夹路径中输入cmd,
vue init webpack firstVue,这个意思是建立一个vue项目,项目名为firstVue,具体项目的名字是由自己为准,这里的只是一个模板参考。
运行初始化命令的时候回让用户输入几个基本的选项,如项目名称,描述,作者等信息,如果不想填直接回车默认就好。

安装依赖资源

因为现在建立的项目只是一个结构框架,整个项目需要依赖的资源还没有安装。安装项目的依赖所需要的步骤。
首先找你的那个项目。然后路径输入cmd.然后运行命令 cnpm install ,等待安装。
安装完成之后,会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹,这里边就是我们项目需要的依赖包资源。

运行项目

在项目目录中,运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。这里简单介绍下 npm run dev 命令,其中的“run”对应的是package.json文件中,scripts字段中的dev,也就是 node build/dev-server.js命令的一个快捷方式。

项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开,可以手动输入)。运行有这样的图片就可以了。
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值