Vue-cli 脚手架

学习目标：

Vue-cli 脚手架

---

学习内容：

Vue-cli脚手架

---

学习时间：

---

学习产出：

八、Vue-cli

1、Vue-cli介绍

Vue-cli是Vue官方提供的一个脚手架，用于快速生成一个vue项目模板
预先定义好的目录结构以及基础代码，就好比咱们在创建maven项目时可以选择一个骨架项目，
这个骨架项目就是脚手架，帮助我们的开发更加快速

• 主要功能
  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

2、配置环境

• 1、Node.js：http://nodejs.cn/download/，安装一路next即可，
  确认安装成功：cmd中使用node -v可以查看nodejs版本，npm -v可以看到npm版本

  • npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。

• 2、安装淘宝镜像加速：npm install cnpm -g

# -g 就是全局安装
npm install cnpm -g

# 若安装失败，则将源npm源换成淘宝镜像
# 因为npm安装插件是从国外服务器下载，受网络影响大
npm config set registry https://registry.npm.taobao.org

# 然后再执行
npm install cnpm -g

安装的位置:C:\Users\Administrator\AppData\Roaming\npm

• 3、安装Vue-cli：

#在命令台输入
cnpm install vue-cli -g
#查看是否安装成功
vue list

3、第一个Vue程序

• 1、webpack创建vue程序

  • 1、cmd中使用cd /d 想要建项目的目录全路径 cd到目录

  • 2、vue init webpack 你的项目名字（vue init webpack myvue）

  • 3、一路输入n，如下图:
    

  • 4、cd 你的项目名（cd myvue）

  • 5、输入npm install安装运行环境

  • 6、在IDEA中打开，控制台输入npm run dev运行，访问：http://localhost:8080/ 即可看到内容