vue-cli4脚手架搭建实战教程

安装nodejs

vue须要经过webpack打包，而webpack是基于node的，因此要先安装nodejs环境。

#安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
#验证cnpm是否安装成功
cnpm -v

安装yarn（可选）

#安装facebook的yarn包管理工具（取代npm）
npm install yarn

安装vue-cli

验证vue-cli是否已安装

安装vue-cli命令

$ cnpm install -g @vue/cli

验证是否安装成功：

卸载vue-cli

若是须要卸载脚手架，使用以下命令:

#2.x版本使用的卸载命令
cnpm uninstall vue-cli -g
#3.x 4.x版本使用的卸载命令
cnpm uninstall @vue/cli -g

使用脚手架建立项目

#建立项目  vue-app是项目名称
$ vue create vue-app

ps: 使用gitbash出现方向键失效没法选择的问题，因此使用默认的cmd窗口来演示。

ps：此处 Choose Vue version要取消选中，由于选择了3.x版本后致使报错。

使用vue-cli3建立项目的时候出错，ERROR command failed: npm install --loglevel error --registry

• 本次报错直接执行了清除npm缓存后问题解决。

npm cache clean --force

启动项目

访问：

目录结构说明

• yarn.lock是存储文件备份之类的
• babel.config.js是打包配置文件，相似webpack
• public目录存储一些公共的资源文件，好比logo图片，图标等