Tracy 小笔记 Vue - CLI 脚手架_tracy自动化-CSDN博客

本文链接：https://blog.csdn.net/weixin_48702807/article/details/117519193

Vue 官网
Vue 的三种安装方式
- 直接下载到本地
- CND 引入(直接引入网上的文件)
- npm install vue --save
vue 核心思想 任何直接更改 DOM 的行为都是在作死
菜鸟教程

vue CLI 脚手架

大型项目需要考虑代码目录结构，项目结构和部署，热加载，代码单元测试等事情。如果手动完成这些配置是很麻烦的，因此会用到脚手架。
CLI: command line interface 命令行界面，俗称脚手架
Vue CLI 是官方发布的 vue.js 项目脚手架
Vue CLI 使用前提：安装了 node, webpack
安装 Vue ClI 3： npm install -g @vue/cli
查看版本 vue --version
安装特定版本： npm install -g vue-cli@2.9.6
CLI 2 初始化项目 vue init webpack my-project
初始化设置：
vue build: 虽然推荐使用 runtime + compiler, 但是我们以后学习后要选择另一个 runtime-only
user Eslint to lint your code: 是否按照 eslint 的方式，规范你的代码。
set up unit tests: 是否要编写单元测试，某些公司是强制要求编写单元测试的
setup e2e test with Nighwatch? 是否进行端对端测试，编写一些测试代码，完成一些自动化的测试来在浏览器点击按钮等完成一些操作
runtime + compiler 和 runtime-only 的区别
- runtime + compiler 生成 UI 界面的过程为: template -> ast(抽象语法树 abstract syntax tree) -> render functions -> virtual dom (虚拟 dom) -> UI
  main.js 文件中配置： new Vue({el:"#app", components:{App}, template:'<App />'})
- runtime-only 生成 UI 界面的过程为: render -> vdom -> UI
  它少了两步因此：性能更高，代码更少
  main.js 文件中配置：
  Vue.config.productionTip = false;
  new Vue({render:h =>h(App);}).$mount('#app')
目录结构
- package-lock.json: package.json 里的各种包的版本有一些设置的其实是不固定的如 "^3.2.0" 是想要安装 "3.2.0" 到 "3.3.0" 之间的一个版本，所以 package-lock.json 会记录最终这个包是安装了哪个具体的版本
- babel.config.js : es6 转 es5 所用到的一些配置
- build 和 configs文件夹都是关于 webpack.config 的配置
- node_modules: 依赖的node 相关的模块
- src: 写代码的地方
- statics : 该文件夹的静态文件（如图片等）在打包的时候会直接打包到 dist 里，不用经过压缩，文件名字也不会改
- .babelrc: ES 代码相关转化配置
- .browserslistrc: 浏览器配置如市场份额大于1 IE 版本要大于 8
- .editorconfig: 项目文本相关配置，帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码样式
  如：
  indent_style = space //# 缩进风格，可选"space"、"tab"
  indent_size = 4 //# 缩进的空格数
  这个文件在脚手架3中是不会自动创建的，原因可能是因为一个团队做任何项目的习惯都会一致，因此在创建新项目的时候会将这个文件复用。
- .gitignore : git 仓库会忽略的文件
- .postcssrc.js: css 相关转化的配置
- .eslintignore : eslint 会忽略的文件
CLI 3 初始化项目 vue create my-project
- 初始化设置
  - pick a preset 配置方式：
    default(babel, eslint) 我們不选这个因为我们不想要 eslint 的方式规范我们的代码
    Manually select feature 手动配置
  - 选了手动时候会出现下列选择,空格选中自己想要的
    - babel: es6 转 es5 所用到的一些配置
    - TypeScript: 是否要用 TS 语法
    - Progressive Web App Support
    - Router
    - Vuex
    - css pre-processors
    - linter / Formatter: 是否按照 eslint 的方式，规范你的代码。
    - Unit Testing: 是否要编写单元测试，某些公司是强制要求编写单元测试的
    - E2E Testing: 是否进行端对端测试，编写一些测试代码，完成一些自动化的测试来在浏览器点击按钮等完成一些操作
  - where do you prefer placing config for Babel, PostCss, Esline, ets?
    对应的配置单独生成文件还是放在 package.json
    - In dedicated config files
    - In package.json
  - where do you prefer placing config for Babel, PostCss, Esline, ets? Save this as a preset for future projects?
    是否把刚才自己的配置保存下来
    - yes: 保存下来
    - Save preset as: 设置保存的名称
- CLI 3 是基于 webpack 4 打造; CLI 2 是基于 webpack 3
- 它的配置文件都被隐藏起来了，它的设计原则是 0 配置，没有 build 和 config 等配置文件夹
  可视化配置：提供了全局的 vue ui 命令，在哪个文件夹运行都能启动，用来可视化配置文件
  它的一大堆配置文件在： @vue/cli-service/lib/Services.js
  - 可视化 vue ui 界面的简单实用
  - 一开始进入是没有项目的，点击“导入”
  - 左导航 item 2 是插件: 这里可以安装新的开发时依赖或者运行时依赖
  - item 3 是项目目前实用的依赖
  - item 4 可以进行项目的基础配置
    其中的启用运行时编辑就是启用 runtime + compiler
  手动配置 vue.config.js:
  - 自己新建的文件，名字不能变，用来手动设置自定义配置。
  - 在这个文件中定义的配置如果和原有配置相同的 item, 会覆盖原有的 item
  - ```
  module.export = {
  	configureWebpack:{
  		resolve:{
  			alias:{
  				'assets':'@/assets',
  				'common':'@/common',
  				'components':'@/components',
  				'network':'@/network',
  				'views':'@/views',
  			}
  		}
  	}
  }
  
  //这里 router 和 store 不用设置，因为他们基本只引用一次
```
- CLI 3 目录结构
  - public: 是 CLI 3 创建出来的相当于 statics 文件里的东西；并且 index.html 也移动到了 public 中
  - main.js: 文件的 code 编写方式也不同，它是没有 template 的，直接配置的 render
- render 函数用法
  1. 传入普通对象:createElement('标签', {标签的属性}, ['内容'])
```
new Vue{
  render:function(createElement){
    return createElement('h2',
      {class:'box'},['hellworld', createElement('button',['按钮'])]
    );
  }
}
```
  2. 传入组件对象
```
new Vue{
  render:function(createElement){
    return createElement(cpn);
  }
}
```