vue之cli（脚手架）的基本搭建

cli（脚手架，民间约定俗成的名字），官网并没有个名字

1.作用

• 快速构建vue项目，底层使用的是webpack

2.版本

cli2 cli3

3.安装

调节工具优先级为：npm<cnpm<yarn
npm install @vue/cli -g cli3的版本
npm install vue-cli -g cli的版本
yarn add @vue/cli global
注：

• 同一台电脑不能兼容两个版本
• 但有工具，可以使我们随意安装cli2和cli3
• 调节工具安装

配置yarn的国内淘宝镜像
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
按顺序在控制台运行一遍即可

npm install @vue/cli-init -g
或使用yarn
yarn ad @vue/cli-init global
步骤：
1. 先安装cli3
2. 再安装调节工具
3. 然后就可以随意安装cli2或cli3了
4. 安装完成后控制台就可以使用vue命令

4.cli3的安装

1. vue create project/ .
2. 选择你的项目中的webpack的一些配置项
3. babel
4. css-pre css预处理语言
5. less
6. sass
7. stylus
8. 所选的配置是往 In dedicated config files（生成的单独的配置性文件） 还是往 package.json放 ， 建议大家使用第一个
9. 目录基本介绍

• node_modules 项目的依赖包
• public 静态资源文件夹
• favicon.ico 浏览器标题的图标
• index.html 它是整个项目的入口文件（根实例）的模板
• src 源代码开发目录
• assets 当前项目开发的静态资源
• js
• css
• img
• components 项目的组件
• xxx.vue 一个.vue的文件， 它就是一个组件， 也是一个模块
• App.vue 入口的主组件
• main.js webpack中配置的主入口文件
• .browserslistrc 项目不支持 ie8及以下的
• .gitignore git上传时， 不上传的文件
• babel.config.js es6->es5 优雅降级
• package.json 当前项目的依赖包配置文件
• postcss.config.js 给css添加引擎头前缀
• readme.md 当前项目的说明文件
• yarn.lock 当前项目的依赖包的第三方库的详细信息记录
  cli3的两种文件配置后的文件夹列表
  例：
  配置 In dedicated config files（生成的单独的配置性文件）的文件列表
  

配置package.json的文件列表

5. 安装 cli2

1. vue init webpack app
2. 进行问题的选择

6. 安装 cli2_simple版本

1. vue init webpack-simple app

7. 界面安装cli3

1. 使用：
2. 命令行输入 ： vue ui（不推荐，太low）

8. 介绍cli3具体内容

• .vue的文件 —》 单文件组件
• 单文件组件由三部分构成，
• template 模板（必写）
• script
• style