vue高级-cli

深藏阁楼爱情的钟 2021-07-25 11:07 289阅读 0赞

vue项目的快速构建工具 cli 【 脚手架 】  
底层 webpack  
React 第一天  
Vue中我们注重应用  
在市场上  
cli2 【 扩展 】  
cli3 【 大纲 】  
什么是cli?  
cli是vue提供的一个用来快速构建项目环境的一个工具，底层使用的是webpack  
cli目前有哪些版本？  
cli2 cli3  
cli3对电脑的配置有一定要求  
cli如何使用？  
cli的安装 【 推荐使用yarn 】  
npm/cnpm/yarn 都可以使用 【 yarn 配置国内镜像 】  
$ cnpm i yarn -g  
使用国内镜像加速npm和yarn  
npm config set registry=https://registry.npm.taobao.org  
yarn config set registry https://registry.npm.taobao.org  
下载cnpm：npm install -g cnpm –registry=https://registry.npm.taobao.org  
$ yarn add @vue/cli global 这个是cli3的版本  
如果我们还想使用cli2的脚手架，那么我们可以在安装一个包  
cli3 @vue/cli  
cli2 vue-cli 【 不要安装 】  
所以一个电脑只能装一个  
问题： 如果我们同时想使用 cli2 和 cli3 怎么办呢？  
$ yarn add @vue/cli-init global  
如果有的同学安装3失败了，  
那么你可以使用cnpm继续安装 @vue/cli @vue/cli-init

1.  `$ cnpm i @vue/cli -g` 这个是cli3的版本  
    如果我们还想使用cli2的脚手架，那么我们可以在安装一个包
2.  `$ cnpm i @vue/cli-init -g`  
    如果还有问题：  
    那么你就不要使用cli3了，你可以单独安装cli2 【 先卸载cli3,重启电脑 】  
    `$ cnpm i vue-cli -g`  
    验证是否安装成功  
    命令行输入： $ vue 看是否有东西输出，如果输出命令提示，证明安装成功  
    创建项目  
    cli3版本创建  
    命令创建 【 推荐 】  
    $ vue create project  
    手动选择配置  
    如果安装node-sass出问题，如何解决：  
    先切换成npm源 nrm use npm  
    使用cnpm 安装 cnpm i node-sass sass-loader -D  
    图形界面创建  
    $ vue ui  
    cli3两种形式创建的结果是一样的  
    cli2版本创建  
    标准版  
    $ vue init webpack project  
    简易版  
    $ vue init webpack-simple project  
    please pick a preset( user arrow keys ) 使用键盘上下键来选择一个配置  
    default 默认配置  
    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 大家一定要记得配置国内镜像源  
    4.分析几个版本的目录  
    cli3  
    目录  
    node\_modules 项目的依赖包  
    cli3 webpack配置放在node\_modules中  
    public 静态资源目录（ 生产环境 ）【 这个目录下的静态资源不会被webpack 编译 】  
    img  
    js  
    css  
    favicon.ico 项目标题的logo  
    index.html 根实例组件的模板，也是整个项目的容器  
    src 源代码开发目录（ 也是开发者主要开发的目录文件夹 ）  
    assets 开发环境的静态资源目录 （ 这个目录中的资源会被webpack编译）  
    assets中如果图片的大小 > 4k 我们就原样拷贝到dist目录  
    assets中如果图片的小小 < 4K 我们就将这个图片转化成 base64  
    base64它是我们前端处理图片的一种形式，将图片路径进行编码，它可以减少一次ajax请求，达到前端性能优化的一个方案，但是base64有一个弊端，这个弊端就是会污染html结构  
    components 组件存储目录  
    xxx.vue文件 单文件组件 一个vue文件就是一个组件  
    组成部分  
    template模板（ 必须写的 ）  
    script脚本 （ 可写可不写）  
    style样式 （ 可写可不写 ）  
    scoped 作用是可以减少命名冲突，规定一个样式的作用域  
    .gitignore git上传忽略文件配置  
    babel.config.js 优雅降级配置文件 用来将es6 --> es5  
    package.json 整个项目的依赖配置文件  
    README.md 整个项目启动的说明性文件  
    yarn.lock 整个项目的依赖性文件的信息  
    postcss.config.js 项目css预处理的配置  
    .browserslistrc 浏览器版本的支持

cli2 标准版  
build webpack配置  
config webpack配置  
node\_modules  
src  
static 静态资源配置  
js  
css  
img  
.babelrc 优雅降级配置文件  
.postcssrc css预处理配置文件  
.editorconfig 编辑器配置文件

cli2 简易版  
src 源代码开发目录  
webpack.config.js webpack配置文件  
5.学习cli使用  
6.cli 它是 webpack + es6模块化来集中实现的

es6模块化  
模块的定义  
const obj = \{\}  
const fn = function()\{\}  
模块的导出  
// 模块的导出有两种形式  
export default //默认导出一个  
  
//export // 批量导出，导出多个  
模块的引入  
// 如果是export default 导出  
import xxx from ‘…/xxx.xx’  
  
// 如果是export 导出  
  
improt \{ xx \} from ‘…/xx.xx’ || import \* as xx from ‘…/xx.xx’  
base64找一个博客了解一下  
在cli3中创建组件，然后导出组件，然后使用组件  
在 vs code编辑器中安装一个插件（ Vetur ）,可以使用vue文件代码高亮还可以有代码提示  
【HMR】 热重载 自动刷新 webpack配置  
cli3 将webpack配置放在 node\_modules,所以Vue并不希望大家去修改这部分webpack配置  
如果我们将来需要更改webpack配置，那么我们需要在 项目 根目录 下创建一个 vue.config.js文件