使用vue-cli搭建webpack模板项目

使用vue-cli搭建webpack模板项目

第一步：nodejs下载、安装以及环境配置

1．登录nodejs 官网：https://nodejs.org/en/ ，建议下载推荐版本（红色箭头所指）。

2．安装nodejs

下载下来的msi包一直点击下一步即可。

 

3．环境配置

新版本都会自动配置环境变量，如果输入node找不到，则可能是环境变量没有配置，需要把node的安装路径配置到变量环境Path里。

 

4．验证是否安装成功

       win+R，输入cmd，回车，输入指令：node –v，若输出对应的版本号，说明安装成功。

 

5．npm的安装

由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以使用cmd命令行输入指令：npm –v来测试是否成功安装。

 

 

第二步：安装webpack

打开命令行工具输入：cnpm install webpack -g，安装完成之后输入指令：webpack -v，如下图，如果出现相应的版本号，则说明安装成功。

 

第三步：安装vue-cli脚手架构建工具

打开命令行工具输入：npm install vue-cli -g，安装完成之后输入指令：

vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。

 

 

通过以上三步，我们需要准备的环境和工具都准备好了，现在开始构建项目

第四步：在硬盘新建一个文件夹

cmd进入到该文件夹，安装vue脚手架输入指令：vue init webpack XXX，XXX为项目名称，最好不要使用中文。

 

 

第五步：cd 命令进入创建的工程目录以及安装项目依赖

输入指令一：cd demo。”demo”是自己建工程的名字。

输入指令二：npm install。因为自动构建过程中已存在package.json文件，所以这里直接安装依赖就行（不需要再npm init）。

 

 

 

第六步：安装 vue 路由模块 vue-router 和网络请求模块 axios

输入指令：npm install vue-router axios --save

 

 

创建完成的“demo”目录如下：

项目结构如下图所示: