使用Vue脚手架创建Vue项目+分析生成的文件

开局先开挂--创建Vue脚手架

======================  cmd命令  =====================

• 为了防止下载过慢先配置 npm 淘宝镜像

         npm config set registry https://registry.npm.taobao.org

• 全局安装@vue/cli。（脚手架，安装一次就行了）

         npm install -g @vue/cl     

        【如果安装过程卡住了，敲回车就行】【注意：警告是作者可能用了一些东西导致的，不用管】

        【安装完先关掉，再进去cmd，输出Vue，看看是否安装完毕】

•  切换到你要创建项目的目录，然后使用命令创建项目

        vue create xxxx     

        【xxxx是你创建的文件名称    创建完毕会生成 脚手架+Hello Would】【起名字的时候要注意回避一些主流库的名字】

• 进入创建的文件目录下，运行项目

        cd xxxx     ---      npm run serve

        或先从进入该文件，再打开cmd  ---      npm run serve

• 最后生成的文件

分析文件【注意：不要随便乱改文件名】

 Ctrl + ~ （esc下面那个键）  ：可以打开 vscode 终端，然后输出 npm run serve 即可打开浏览器页面

• public文件

        favicon.ico是页面图标 , index.html解析如下图

• src文件

        1、src下的component文件是赋值我们自定义的组件，最后注册在App.vue（生成vue_exercise文件就有了）上面

        2、src文件下的App.vue（统领所有组件）结构和上图差不多，但是我们需要在script标签引入我们自定义的组件和注册该组件

        3、src文件下的main.js，建立一个Vue实例，并注册App组件

引入Vue 以前是在html中通过script标签引入Vue.js的
这个js只是删减版vue.runtime.xxx.js
1. vue.js与vue.runtime.xxx.js的区别：
    1. vue.js是完整版的Vue，包含：核心功能 + 模板解析器。
    2. vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
2. 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用render函数接收到的createElement函数去指定具体内容。
---------------------------------------------------------------------------
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 关闭Vue的生产提示
Vue.config.productionTip = false

// 创建vm
new Vue({
	el:'#app',
	render: h => h(App)
})
---------------------------------------------------------------------------
    // 完整版Vue才能这么写
    template:`
你好啊
`,
    components:{App},
---------------------------------------------------------------------------
是什么原因呢
原因：模板解析器占Vue.js的三分之一容量，最后打包上传用了webpack打包，而webpack已经把 .Vue 翻译成 .js 该解析的模板都解析完了，
这个时候模板解析器就没有什么作用了（即某天我们最终写完代码，并把模板转换为最纯粹的文档，这个时候模板解析器就没有什么存在的必要了），打包可以省点空间，所以我们需要用render去解析模板
---------------------------------------------------------------------------
    // 当你使用残缺版的Vue时，还想创建元素，用下面的这个
    render(creatElement) { // 参数是一个函数
         console.log(typeof creatElement); // function
         // 
你好啊
   下面加引号，是因为 h1 是html内置元素
         return creatElement('h1', '你好啊')
     }


    // * 简写
    render:q=> q('h1','你好啊')


​