vue4---脚手架

vuecli-脚手架的介绍和安装

• node -v 检查node版本
• npm -v检查npm版本
  
• -g global全局
• npm install webpack -g webpack的全局安装
• npm install -g @vue/cli 安装vue脚手架3，如果需要按照2的方式初始化项目是不可以的，脚手架3和旧版使用了相同的vue命令，所以2被覆盖了，如果你仍然使用旧版本的vue init功能，我们可以全局安装一个桥接工具，我们现在没有必要安装脚手架2，我们可以在3的基础上拉一个2的模板，使用2
• npm install -g @vue/cli-init 拉去脚手架2模板
• npm install -g vue安装脚手架2
• vue --version检查我们脚手架的版本
• vue init webpack my-project vue cli2初始化项目
• vue create my-project vue cli3初始化项目

vuecli-CLI2初始化项目过程

• vue init webpack vuecli2test 初始化
• vuecli2test这个是项目文件夹的名字，接下来会让你取项目的名字，一般情况下，我们项目文件夹的名字和项目的名字一样
• vue全家桶vuecore+vue-router+vuex
• 按下crtl点就会取消。crtl + x剪切
  
• 这两个下面这个打包程序小，并且运行效率高，暂时先选第一个，看脚手架配置，没有配置git就只有一个，也没有名字
• 路由 router暂时no
• ES（js）-lint(对ES代码进行一些限制) 比如多加空格或者少空格的话就会报错，暂时选择标准
• 单元测试 no
  

vuecli-CLI2的目录结构解析

• node是使用c++写的，核心是v8引擎，v8引擎将js转换成二进制代码，快。而一般的是js转换为字节码，在部署到浏览器上
• 像以前我们写了一个js代码，想让他跑起来，我们必须依赖一个index.html来实现，但是现在我们可以直接通过node test.js来运行
• 一些git文件夹，有些是空的，就不上传，但是加了这个static里，就会上传
  
• package.json 一些大概安装的版本
• package-lock.json 一些真实的版本

安装CLI错误和ESlint规范

• 安装脚手架npm install @vue/cli -g不成功，错误说通过npm clean cache -force来解决，在终端里面，一些指令是不允许我们执行的，所以我们打开的时候以管理员的身份打开试试，终端在执行上面这个指令的时候，也是去清空某一个文件夹的，通过C:\Users\Mi Manchi\AppData\Roaming\npm-cache把这个文件夹删掉，就可以安装了
• 在js里可以加分号，也可以不加，ES（js）-lint规定函数括号和名称之间必须有空格，写了函数必须引用，写完一行代码后面不能有分号
• config --> index.js -->useEslint:false就可以关掉

runtime-compiler和runtime-only的区别

• 两者的不同只在main.js里，split-vertacally分屏

这两个一样
 render: h => h(App)
  render:function (h) {
   return h(App)
  }

vue程序运行

• runtime-compiler
• template->ast->render->vdom->uI
• runtime-only(1.性能更高 2.下面的代码量更少)那么.vue文件中的template是由谁处理的，是由vue-template-compiler,变成了一个render函数，所以所有的组件里都是不包含template的，我们没有必要使用runtime-complier,我们最终会用runtime-only
• render->vdom->UI

render函数的使用

runtime-compiler main.js


import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
const cpn = {
  template:'
{{message}}
',
  data(){
    return {
      message:'我是组件message'
    }
  }
}

new Vue({
  el: '#app',
  // components: { App },
  //   // template: ''
  //这里也可以使用render函数
  render:function (createElement) {
   //1.普通用法 createElement('标签',{标签的属性}，['']标签内容)，挂载我们的app,这三个属性我们可以少写
    //到时候我们的这里index.html这个 
就会变成h2
    return createElement('h2',
    {class:'box'},
    ['hello',createElement('button',['按钮'])])

  //2 传入组件对象
    return createElement(cpn)
    //这样写的话就不用进行编译了，效率会更高
}
})

  return createElement('h2',
      {class:'box'},
      ['hello',createElement('button',['按钮'])])
  }

• 如果在之后的开发中，你依然使用template，就需要选择runtime-compiler
• 如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择runtime-only
  
  

VueCLI3创建项目和目录结构

Micro微小soft软件
preset：配置，default：默认，manually：手动的 overwrite覆盖 ，e:覆盖Merge:合并Cancel :取消 ，CSS Pre-processors:css预处理； Linter / Formatter：规范
In dedicated config files：单独的文件

• Save this as a preset for future projects ，保存了之后就是这个
  
• .gitconfig全局的git配置在这个文件里面
• 想要删掉保存的配置文件，在c盘下的vuerc里面就有配置，删掉就行C:\Users\Mi Manchi

{
  "useTaobaoRegistry": false,
  "presets": {
    "xingxing": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {}
      }
    }
  }
}

• future：将来
• fut ：特性
• 一些和命令有关的东西就一般都是以rc结尾的，这和Linux底层有关，rc->run command 运行终端
• vcs->version control system(版本控制系统git/svn)
• public和原来的static一样，src里面写的都是一些源码
• .gitignore忽略的东西
• 跑脚手架三的话，默认用npm run serve 因为"serve": “vue-cli-service serve”,
• Vue.config.productionTip = false产品的提示信息，当我们在执行npm run build 的时候，我们会有一些提示信息，当我们执行npm run serve 的时候，不需要提示信息，所以改成false了

这样写和我们的el写法一样，只是内部多了一层判断，最终都会被我们render函数出来的东西替换

new Vue({
  render: h => h(App),
}).$mount('#app')

目录结构详解

vueCLI3配置文件的查看

UI方面的配置

• 1.启动配置服务器：vue ui跟那个目录是没有关系的
• 启动一个GUI-就是用户界面
• 进入用户界面这时候需要修改文件夹我们可以直接进入相关路径选中然后按下cmd
• 当我们要看最真实的版本，我们应该看package.json里面的不加箭头或者波浪的版本，或者看打包出来的版本
• 在这个图形化界面方式去修改我们对应相关配置信息，也可以看我们项目依赖什么东西，也可以运行起来我们项目，隐藏的配置在node-modules->@vue->cli-service->webpack.config.js
• 2.如果我们确实想要修改一些文件，新建一个文件夹vue.config.js

module.exports = {
  
}
通过这个导出，会进行一些合并