给大家介绍下用 Vue2.0 搭建Vue脚手架(vue-cli),在搭建脚手架之前,先做好环境配置。
详细如下:
1.先下载node.js(官网地址:https://nodejs.org/en/)下载安装后,打开命令行工具(win+r,然后输入cmd),输入 node -v,查看版本号,出现类似下图的版本号说明安装成功:
2.输入npm -v 查看 npm 的版本号
3.有的朋友下载的时候比较慢,也可以通过安装淘宝镜像,打开命令行工具,把这个命令(npm install -g cnpm --registry=https://registry.npm.taobao.org)复制到命令行工具,记住要手动的右键粘贴,因为ctr + v 的在命令行没法粘贴。
4.现在有很多的项目模版(项目模版)
simple
webpack
webpack-simple
browserify
browserify-simple 等等
今天主要说下webpack 跟 webpack-simple
基本使用流程
(1) npm install vue-cli -g 安装vue命令环境 如下图(下载中):
(2)生成项目模版
命令: vue init <项目模版名> 本地自己想要创建的文件名字 如下图:
这个时候出现?Project name 就是项目名称的意思,直接enter,然后还会跳出来另外的提示,一路enter下去,出现下图,说明项目模版创建完毕,这时候还没有完。
注意: 此处自己创建的项目名字不能含有大些字母,不然报错提示
注意:这个地方看你在那个文件夹里面,如果你是在刚刚创建的文件夹同一层打开的命令工具,那么直接cd <自己创建的项目名字>是可以进入的,这里简单说下
CD 目录名 进入到目录名文件夹
CD \ 退回到根目录
CD .. 退回到上一根目录
CD 或者 CD . 显示当前路径
(5)这个时候 运行 npm run dev