搭建vue手脚架

安装node.js

1.进入Node.js官网:https://nodejs.org/en/,选择下载并安装Node.js。
2.验证Node.js是否安装好,在windows下,win+r召唤出运行窗口,输入cmd打开命令行窗口。输入

node -v

即可得到对应的Node.js版本。
在这里插入图片描述
npm包管理器是集成在Node.js中了,所以在安装Node.js的时候就已经自带了npm,输入

npm -v

可得到npm的版本。
输入以下命令

npm -g install npm

更新npm最新版本。
安装cnpm
执行命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

使用npm的国内镜像(npm 国内镜像)cnpm 命令代替默认的npm命令,增加依赖包加载速度且避免资源限制。
cnpm安装脚手架vue-cli
在命令行中运行命令

cnpm install -g vue-cli

安装脚手架。

在这里插入图片描述

构建项目

将vue项目建在D的vue-workspace文件夹下,利用命令进入此目录。
在cmd中输入盘符:回车即可进入该盘,
然后执行命令进入vue-workspace路径目录下,
再输入新建项目命令

vue init webpack name

执行后会自动生成vue项目

安装项目依赖

上面脚手架自动生成的vue项目不能直接运行,需要加载上项目需要的依赖包才能运行。通过在cmd中使用命令先定位到项目所在路径目录下C:\workspacesvue-work\name,然后输入命令

cnpm instal

安装项目所需的依赖包资源。
(在下载第三方开源项目运行的时候,有时会遇到奇怪的报错,然后通过先执行cnpm rebuild node-sass,后执行cnpm install解决,此步骤不是必须的。)

运行项目

在cmd中定位到name目录下,然后输入命令

npm run dev

浏览器访问项目
最后使用浏览器访问 localhost:8080/

经过以上步骤完成了搭建vue的脚手架项目,可以简单看下项目目录,后续我们开发项目的时候只需在src目录下进行。

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值