小白学习vuejs-06--脚手架CLI一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。

自学前端

前文
- 本文是我自学vue的一些知识以及个人理解, 希望帮助到一些想要学习前端的小白朋友
- 介绍本次学习的是脚手架CLI
- 这是基于我学习的笔记而来的文章

如果你是简单写几个Vue的Demo程序, 那么你不需要Vue CLI
如果你再开发大型项目, 那么你需要, 并且必然需要使用Vue CLI
- 使用Vue.js开发大型应用时, 我们需要考虑代码目录结构, 项目结构和部署, 热加载, 代码单元测试的事情
- 如果每个项目都要手动完成这些工作, 那无疑效率比较低效, 所以我们会使用一些脚手架工具来帮助完成这些事情
CLI是什么意思?
- CL是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架
- Vue CLI是一个官方发布, vue.js项目脚手架
- 使用vue-cli 可以快速搭建Vue开发环境及对应的webpack配置
脚手架长什么样子?

安装NodeJS
- 可以在官网中下在安装
- 网址:
检测安装的版本
- 默认情况下自动安装Node和NPM
- Node环境要求8.9以上或者更高版本
  
  node -v
什么是NPM呢?
- NPM的全称是Node package Manager
- 是一个NodeJS包管理和分发工具, 已经成为了非官方发布Node模块(包)的标准
- 后续我们会经常使用NPM来安装一些开发过程中依赖包
cnpm安装
- 由于国内直接使用npm的官方镜像是非常慢的, 这里推荐使用淘宝NPM镜像
- 你可以使用淘宝定制的cnpm(gzip 压缩支持) 命令行工具代替默认的npm:
- npm install -g cnpm --registry=registry.npm.taobao.org
- 这样就可以使用cnpm命令来安装模块了:
- cnpm install [name]
Vue CLI的使用
安装Vue脚手架
- npm install -g @vue/cli@3.0.4
- -g global 全局的, 全球的
注意: 上面安装的是Vue CLI3的版本, 如果想按照Vue CLI2的方式初始化项目是不可以的
拉取 2.X模板(旧版本)
- vue CLI3 和旧版使用了相同的vue命令, 所以 CLI2 (vue-cli)被覆盖了, 如果你任然需要使用
  
  旧版本的 vue init 功能, 你可以全局安装一个桥接工具
- npm install -g @vue/cli-init@3.2.0
Vue CLI2初始化项目
- vue init webpack my-project
- vue init webpack project --offline
  
  没有出错的方式
  
  descripton 描述
  
  VueCore+vue-router+vuex
  
  ES(js代码)-Lint(限制) 使你的代码变得规范
  
  e 2 e end to end 端到端
Vue CLI3初始化项目
- vue create my-project