yarn jar包本地缓存路径

转载

mob64ca13ff5b03 2024-09-29 12:25:14

文章标签 yarn jar包本地缓存路径 vue-cli2 vue-cli3 yarn 配置文件 文章分类 Yarn 大数据

cli

vue项目的快速构建工具 cli 【脚手架】
底层 webpack

什么是cli?

cli是vue提供的一个用来快速构建项目环境的一个工具，底层使用的是webpack

cli3对电脑的配置有一定要求

yarn

yarn 是什么？

yarn 是类似于npm的一个包管理器，它是facebook出品

yarn 使用的好处？

安全
yarn 可以保证我们项目中以来的版本的一致性

yarn 安装
安装: $ npm i yarn -g
配置国内镜像源： $ yarn config set registry https://registry.npm.taobao.org
yarn使用命令

安装 yarn add 第三方包的名称 -S/-D
-S 生产环境可以不写，也就是yarn add 第三方模块默认生产环境安装
-D 开发环境
yarn init 生成package.json文件
yarn add xxx
yarn remove xxx
yarn 通过package.json来安装项目依赖包

vue的命令

* create [options] <app-name>                create a new project powered by vue-cli-service
 * add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project
 * invoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
 * inspect [options] [paths...]               inspect the webpack config in a project with vue-cli-service
 * serve [options] [entry]                    serve a .js or .vue file in development mode with zero config
 * build [options] [entry]                    build a .js or .vue file in production mode with zero config
 * ui [options]                               start and open the vue-cli ui
 * init [options] <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init)
 * config [options] [value]                   inspect and modify the config
 * upgrade [semverLevel]                      upgrade vue cli service / plugins (default semverLevel: minor)
 * info                                       print debugging information about your environment

vue create 项目名称使用cli3创建一个项目
vue add 插件名称 vue自动配置插件
vue ui 使用GUI进行vue项目的安装， GUI指的是图形化界面
vue init 模板名称项目名称使用cli2创建一个项目

cli3的安装

cli3-repl的安装

$ vue create 项目名

cli3-gui 的安装

$ vue ui

cli2 的安装

cli2-standard

$ vue init webpack 项目名

cli2-simple

$ vue init webpack-simple 项目名

cli如何使用？

cli的安装【推荐使用yarn 】

yarn 安装和配置

安装: $ npm i yarn -g
配置国内镜像源： $ yarn config set registry https://registry.npm.taobao.org

验证是否安装成功

命令行输入： $ vue 看是否有东西输出，如果输出命令提示，证明安装成功

创建项目

cli3版本创建

命令创建【推荐】

$ vue create 项目名称

手动选择配置
如果安装node-sass出问题，如何解决：

先切换成npm源 nrm use npm
使用cnpm 安装 cnpm i node-sass sass-loader -D

图形界面创建

$ vue ui
创建完成的结果和使用命令创建时一样的

cli3版本配置介绍

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

default 默认配置
Manually select features 手动选择配置

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? 将上面所选的配置保存下来，以备将来的项目使用

cli2版本创建

标准版

$ vue init webpack project

简易版

$ vue init webpack-simple project

• 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 静态资源配置
• .babelrc 优雅降级配置文件
• .postcssrc css预处理配置文件
• .editorconfig 编辑器配置文件
• cli2 简易版 
    
• src 源代码开发目录
• webpack.config.js webpack配置文件
3. 学习cli使用
• 读懂项目结构
• 学会创建单文件组件 
    
• 创建
• 导出
• 导入
4. 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'