• 03 Vue脚手架

    1 安装

    配置npm的源为淘宝源：

     安装命令：

    1. npm install -g @vue/cli
    2. # OR
    3. yarn global add @vue/cli
    4.  
    5. #检查
    6. vue --version
    7. @vue/cli 5.0.8

    升级

    1. npm update -g @vue/cli
    2.  
    3. # 或者
    4. yarn global upgrade --latest @vue/cli

    2、创建项目

    1. vue create learn-one
    2.  
    3. 选择vue2或者3 
    4.  
    5. #完成
    6. 🎉  Successfully created project learn-one.
    7. 👉  Get started with the following commands:
    8.  
    9.  $ cd learn-one
    10.  $ npm run serve

    启动项目

    1. #执行
    2.  $ cd learn-one
    3.  $ npm run serve
    4.  
    5. #输出
    6.  DONE  Compiled successfully in 3904ms                                                      
    7.  
    8.   App running at:
    9.   - Local:   http://localhost:8080/ 
    10.   - Network: http://10.91.81.99:8080/
    11.  
    12.   Note that the development build is not optimized.
    13.   To create a production build, run npm run build.

    访问：http://localhost:8080/

     脚手架启动OK；

    3、脚手架目录分析

     package.json  npm脚本命令

     package-lock.json 锁定包的依赖

     src下的

    main.js 是运行npm run serve最先开始执行的文件，是vue的一切的开始

    1. /**
    2.  * 项目的入口文件
    3.  */
    4. //导入vue
    5. import Vue from 'vue'
    6. //导入App组件
    7. import App from './App.vue'
    8. //关闭vue的生产提示
    9. Vue.config.productionTip = false
    10.  
    11. new Vue({
    12.   //将app组件放入容器中
    13.   //引入的vue是不能配置模板的，引入vue是精简版本vue.runtime.esm.js，不包含模板解析器
    14.   render: h => h(App),
    15. }).$mount('#app')

    app.vue是的app组件，是所有组件的父组件；

    pubilc下的index.html是网页的容器:

    1. html>
    2. <html lang="">
    3.   <head>
    4.     <meta charset="utf-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    8.     <meta name="viewport" content="width=device-width,initial-scale=1.0">
    10.     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    12.     <title><%= htmlWebpackPlugin.options.title %>title>
    13.   head>
    14.   <body>
    16.     <noscript>
    17.       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.strong>
    18.     noscript>
    20.     <div id="app">div>
    21.     
    22.   body>
    23. html>

    分析：main.js 中: render:  h=>h(App)

    改写为熟悉的写法：

    1. new Vue({
    2.     el:"#root",
    3.     template: ``,
    4.     comments: {App}
    5. })

    运行发现不会出现页面：报错

    1. [Vue warn]: You are using the runtime-only build of Vue where 
    2. the template compiler is not available. Either pre-compile 
    3. the templates into render functions, or use the compiler-included build.

    因为这种方式引入的vue不是完整的vue，不包含模板解析器，所以报错了：

    import Vue from 'vue'
引入vue是精简版本vue.runtime.esm.js，不包含模板解析器

     通过render函数，render默认被vue框架调用，引入的一个完整的vue.js,

    通过render可以创建具体的元素；

    1. import Vue from 'vue'
    2. // import App from './App.vue'
    3.  
    4. Vue.config.productionTip = false
    5.  
    6. // new Vue({
    7. //   render: h => h(App),
    8. // }).$mount('#app')
    9.  
    10. new Vue({
    11.     el:"#app",
    12.     render(createElement) {
    13.         console.log('render,创建元素')
    14.         return createElement('h1','你好啊')
    15.     },
    16.     // template: ``,
    17.     // comments: {App}
    18. })

    所以 render: h => h(App)  实际上类似:  template: ``,  官方 通过render这种方式可以引入完整版本的vue.js 包含模板解析；为什么呢？

    开发的时候需要模板解析器，模板解析器占用vue的1/3代码， 最后打包的时候不需要vue的解析器，所以官网设计了很多精简版本的js。框架通过了render的方式引入完整vue。

  • 相关阅读:
    Abnova丨 MaxPab 小鼠源多克隆抗体解决方案
    np.nan, np.isnan, None, pd.isnull, pd.isna 整理与小结
    docker-compose
    大型国企用泛微OA，让会务管理有序，让会议开展高效
    多维分析预汇总应该怎样做才管用？
    尼得科电机的强大性能，将列车门和屏蔽门的开合变得从容而安全
    [474]. 一和零
    代码随想录算法公开课！
    Flutter 实现背景 Parallax 动画
    java高校自习室座位预订系统springboot+vue
  • 原文地址：https://blog.csdn.net/LoveG_G/article/details/127678041