Vue-cli的简介与使用

 

         之前学习基础语法、todolist,所有的代码写在index.html之中,大型项目不可维护。

        在真实vue项目开发过程中,会借助webpack打包工具帮助构建大型项目开发目录,再开发完成之后进行打包的操作,帮助生成线上可运行的代码。

        如果让每一个开发人员自己配置webpack开发环境,对于开发者来说是一个不小的挑战。Vue官方也考虑到这一个因素,提供一款脚手架工具,vue-cli,通过这个脚手架工具我们可以快速构建标准的vue项目,同时这个工具自带webpack各种配置。我们可以借助这个工具迅速上手工程级别开发。

命令行工具 (CLI)

 

 

 

 

1.安装node8.11.4

1.1安装node

node下载地址:https://nodejs.org/download/release/v8.11.4/

Vue-cli的简介与使用

安装node.js一路默认即可。

Vue-cli的简介与使用

Vue-cli的简介与使用

Vue-cli的简介与使用

Vue-cli的简介与使用

Vue-cli的简介与使用

Vue-cli的简介与使用

 

1.2 检查node及npm版本

安装node.js会自动安装npm,在cmd中输入node -v,会显示node.js的版本,输入npm -v会显示npm的版本

Vue-cli的简介与使用

1.3配置环境变量

1)新建变量:NODE_HOME,值为:D:\software\nodejs

Vue-cli的简介与使用

 

2)PATH中添加两个值:%NODE_HOME%、%NODE_HOME%\node-global

Vue-cli的简介与使用

安装vue-cli 2.9.6

前置:设置淘宝镜像:npm config set registry "https://registry.npm.taobao.org"

1.安装: npm install [email protected] -g

Vue-cli的简介与使用

2.查看版本号:vue -V

Vue-cli的简介与使用

 

3.卸载:npm uninstall vue-cli -g

Vue-cli的简介与使用