VUE的cli和webpack

cli

1.vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目
，底层使用的是webpack
2.目前cli有cli2和cli3两个版本
3.npm/cnpm.yarn都可以安装： $ yarn add @vue/cli global` 这个是cli3的版本
A.命令创建 $vue create project
B.图形界面创建

4… please pick a preset( user arrow keys ) 使用键盘上下键来选择一个配置

1. default 默认配置

2. Manually select features 手动选择配置

   配置指的是配置webpack

   babel 优雅降级 es6 —> es5

   eslint js语法检测

   CSS Pre-processors css 预处理语言 less sass/scss stylus

   Linter / Formatter eslint / jslint

   Unit Testing 单元测试

   E2E Testing 端到端的测试

   In dedicated config files 将所选的每一个选项用一个文件来保存（ 配置 ）

PWA (web app ) 在浏览器中使用的app

Save this as a preset for future projects? 将上面所选的配置保存下来，以备将来的项目使用

cli3 使用的包管理器器建议 是 yarn

1.图片的使用

public目录		不会被编译
assets目录		会被webpack编译	【<4k的图片会被		转变成base64】

2.创建单文件组件

举例：Home.vue		   一般组件文件名首字母都是大写
单文件组件的导入 			import   Home   from  './pages/Home.vue'
单文件组件的 使用 					以标签的形式使用组件

单文件组件由三大部分组成
template模块
script脚本【组件的选项】
style样式 【scoped是规定样式作用范围】

3.启动项目

1.开发环境启动： yarn serve
2.生产环境 ：yarn build

4.main.js是整个项目的入口文件

5.cli2和cli3

cli3webpack配置在node_modules中，cli2在项目根目录下面

webpack

1.市面上流行的前端工程化工具

webpack* 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle（ 分块束 ）

webpack1

​ 支持CMD和AMD，同时拥有丰富的plugin和loader，webpack逐渐得到广泛应用。

webpack2

​ 支持ES Module，分析ESModule之间的依赖关系，

​ webpack1必须将ES，Module转换成CommonJS模块，2支持tree sharking

webpack3

​ 新的特性大都围绕ES Module提出，如Scope Hoisting和Magic Comment；

​ webpack3以上基本上都可以解决es6提出的模块化

webpack4

​ 可以解决es6模块化【 export default / export import 】

​ 更多个功能性 pulgin【 插件 】 和 loader 【 转换器 】

​ 前端框架中广泛使用： Angular Vue React 的脚手架都是由webpack来进行开发、管理

2.安装( 选择以下一种即可 )

	全局安装

$ npm install webpack webpack-cli -g

$ cnpm install webpack webpack-cli -g

$ yarn add webpack webpack-cli global

    局部安装

$ npm install webpack webpack-cli -D

$ cnpm install webpack webpack-cli -D

$ yarn add webpack webpack-cli -D

3.开发环境

1. Webpack底层是由 Node.js 来开发的，也就是说Webpack的配置文件都是 Node.js 文件

2. Webpack的模块化书写的规范是Common.js规范

3. 环境支持： Node.js 8+

4. 前端环境：

   • 开发环境 - 无法直接在服务器中去运行
   • 生产环境 - 将开发环境下的代码经过 打包 压缩 编译 之后的文件
   • 测试环境 - 将开发环境的代码经过 打包 压缩 编译 之后的文件，放在测试环境服务器中运行
     • unit test 单元测试 【 mocha Jest 】
     • e2e 端到端测试
   • 预上线环境： 将开发环境的代码经过 打包 压缩 编译 之后的文件，放到一个局域网中去运行
   • 上线环境：将开发环境的代码经过 打包 压缩 编译 之后的文件，放到云服务器或是服务器主机中，可以供任何人访问，使用的一个环境（ 这个环境的上线要经过国家审核 ）
   • 核心关注点在： - 开发环境 - 生产环境