一、安装环境搭建
(1)安装node.js
从node官网(https://nodejs.org/en/)下载并安装node,安装完成之后,打开命令行工具输入命令node -v,如下图,出现对应版本号就说明安装成功了
到这为止,node的环境已经安装完了,npm包管理工具也都有了,但是由于npm的服务器是外国,有时候我们安装“依赖”的时候很慢,为了更快更稳定,所以需要用这个cnpm来安装我们说的依赖
(2)安装cnpm
点击进入淘宝的cnpm(https://npm.taobao.org/)网站,里面有详细配置方法
或者打开命令行输入
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
等待安装成功,输入cnpm -v 可以查看当前cnpm版本
(3)安装webpack
打开命令行工具输入 npm install webpack -g,安装完成之后输入webpack -v 出现相应版本号,说明安装成功
(4)安装vue-cli脚手架
打开命令行工具输入:npm install vue-cli -g,安装完成后,输入vue -V(这里是大写的V),如下图,如果出现相应版本,则说明安装成功
二、使用vue-cli来构建项目
上述步骤,已经把需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目
创建一个基于webpack模板的新项目
打开命令行输入工具,
1、cd 到想要建立项目的目录路径 (如下图,我的项目是建立在e盘workDirectory目录下面的)
2、使用vue-cli初始化webpack项目 vue init webpack 项目名(如下图,)
3、 cd命令进入创建的工程目录,比如cd vueTestProject ( vueTestProject是自己上面建的工程名字)
4、安装项目依赖: npm install
到目前为止,创建完成的vueTestProject目录如下
5、启动项目:npm run dev
这一步,默认服务器启动的是本地的8080端口,所以请确保你的8080端口没有被别的程序占用,
服务器启动成功后浏览器会默认打开一个欢迎页面,如下图
如果没有直接弹出浏览器,可以设置config文件夹里面的index.js,修改dev里面autoOpenBrowser属性为true,这样每次执行完npm run dev 就会直接弹出默认浏览器页面了
到此就算成功利用vue-cli搭建一个基于vue+webpack的项目了