需要的东西:
- node.js环境(npm包管理器)
- cnpm npm的淘宝镜像
- vue-cli 脚手架构建工具
安装node.js
从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以。
安装完成之后,打开命令行工具,输入 node -v,如图,出现版本号,则说明安装成功。
npm包管理器是集成在Node.js中,在安装Node.js的时候就已经自带了npm。
输入npm -v可得到npm的版本。
npm的版本需要在3.0.0以上版本,如果npm的版本小于3.0.0,需要更新版本,命令如下。
npm -g install npm
由于资源的限制,用npm安装依赖包的时候经常失败,建议使用npm的国内镜像cnpm ,命令如下。
ps:看个人喜好,不相信cnpm,怕有坑,所以教程我会使用npm
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装vue-cli脚手架构建工具
命令如下。
npm install -g vue-cli
构建项目
利用命令进入目录(项目)。我是想建在F盘,在cmd中输入盘符f:回车即可进入F盘。
在此目录下创建一个基于 webpack 模板的新项目,即在cmd中输入以下命令。
vue init webpack myVue
如图创建完成:
vue init webpack myVue是初始化一个项目。在此过程中,需要输入项目名、描述、作者等,不想填直接回车就好。
如果myVue文件夹没有node_modules文件需要安装依赖,否则项目运行不了,命令如下:
npm install
打开项目目录,目录文件如下:
运行项目
命令如下:
npm run dev
出现此地址则说明项目运行成功:
打开浏览器打开localhost:8080呈现以下页面:
到此,vue的脚手架工具已经搭建完成,具体项目的开发只需在src目录下进行。
ps:友情提示,npm安装东西,install可简写成“i”