• Vue脚手架Ⅰ（初始化脚手架，render函数，修改默认配置，ref属性）

    文章目录

    使用Vue脚手架

    Vue上一篇学习笔记2见https://blog.csdn.net/weixin_51249285/article/details/127729797?spm=1001.2014.3001.5501

    之前写的单文件组件还没有成功跑起来，我们现在就需要把它放到脚手架赶紧让它运行起来

    3.1 初始化脚手架

    3.1.1 说明

    1. Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）
      • 写.vue文件，要是没有脚手架，浏览器是不会认的。
    2. 最新的版本是 4.x
      • 这个4 版本是脚手架，不是vue版本 vue版本 1，2，3，目前学的2，学好了2，3是在2上一丢丢升级改造。脚手架一般选最新的版本4，它是向下兼容的.
    3. Vue官网文档: https://cli.vuejs.org/zh/。
      • 脚手架英文叫CLI（command line interface 命令行接口工具），太官方，我们一般叫脚手架

    3.1.2 具体步骤

    在这里插入图片描述

    第一步（仅第一次执行）：全局安装@vue/cli。

    npm install -g @vue/cli

    在这里插入图片描述

    在这里插入图片描述

    第二步：切换到你要创建项目的目录，然后使用命令创建项目

    vue create xxxx

    vue create 用这个命令创建出来的是脚手架，但是vue官网特别给你，这个脚手架里面给你写了一个例子，例子名字就叫helloworld，不喜欢这个，就可以把hello world删掉，替换掉自己真正要写的功能就可以，所以这个脚手架+hello就是一个项目了，xxxx

    例如我们要在桌面创建一个:

    先把位置调到desktop，可以试一些指令

    在这里插入图片描述

    正式创建脚手架

    在这里插入图片描述

    选择vue2（之后再用3）

    在这里插入图片描述

    开始创建

    在这里插入图片描述

    创建成功

    在这里插入图片描述

    第三步：启动项目

    npm run serve

    在这里插入图片描述

    在浏览器中打开地址，就可以看到vue为我们精心准备的helloworld组件

    在这里插入图片描述

    备注：

    1. 如出现下载缓慢请配置 npm 淘宝镜像：npm config set registry https://registry.npm.taobao.org

    2. Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpack 配置，请执行：vue inspect > output.js

    3.1.2 分析脚手架结构

    先把刚刚开启的工程停一下，按ctrl+c就可以（不行的话，按ctrl+shift+c）,不用选Y/N,直接再按下一次刚刚的按键就行，然后关掉cmd
    在这里插入图片描述

    再用vscode打开这个vue_test文件，去分析里面的脚手架结构，先把脚手架结构捋清楚，再去跑之前的那些代码

    模板项目的结构

    在这里插入图片描述

    ├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git 版本管制忽略的配置
├── babel.config.js: babel 的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    下面分析的文件 按照 npm run serve 执行之后，首先找到哪个文件开始运行，然后一点一点摸牌清楚，我们就按照这个顺序分析

    1 一些配置文件

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    2 src(重要)

    main.js

    src里面很重要的一个人main.js

    执行完npm run serve 就去运行了main.js，我们试着运行一下

    在这里插入图片描述

    在这里插入图片描述

    试完之后把刚刚修改的代码还原，（只要已保存，下面就会自动编译）

    按 ctrl+esc下面那个模板字符串的按键(`)就可以打开当前vscode终端

    分析代码：

    main.js

    /**
 * 该文件是整个项目的入口文件
 */
// 引入Vue (此处不用执行npm i vue，脚手架在node_modules安排的明明白白)
import Vue from 'vue'
// 引入App组件，它是所有组件的父组件
import App from './App.vue'
// 关闭vue的生产提示
Vue.config.productionTip = false

// 创建Vue实例对象---vm
new Vue({
  el: '#app', // 此处在原基础上修改了一点
  // 下面这行代码一会解释---完成了这个功能：将App组件放入容器中
  render: h => h(App),
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    App.vue

    由main.js中import App from './App.vue’继续分析 App.vue

    App.vue

    // 结构


// 交互


// 样式



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    我们可以把之前没运行的成功的单文件组件，把App.vue,school.vue,student.vue拖到刚刚的脚手架里面替换掉

    3 public

    index.html

    里面只有一个html文件（单页面应用），这个非常重要，整个文件的应用界面。不要觉得单个页面单一，等学到路由，会发现多个页面来回跳并不好

    index.html

    DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    
    <title><%= htmlWebpackPlugin.options.title %>title>
  head>
  <body>
    
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.strong>
    noscript>
    
    <div id="app">div>
    
  body>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    1. 使用这个BASE_URL 不用之前那种./ …/ 的路径写法是防止项目部署后可能会出现路径错误问题，这里使用个BASE_URL指的就是public下的文件（底层设置好了）

    2. htmlWebpackPlugin.options.title 写这个功能是：它默默来到package.json里面找到name作为网站的标题。这个是通过webpack里面的一个插件完成的

    3. noscript：浏览器如果不支持js，那么标签里面的语句就会出现在页面（还有浏览器不支持js嘛？？？都废了）

    演示一下：(了解一下就行)

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <h1>你好啊h1>
    <noscript>
        <strong>不好意思，你的浏览器不支持js有点旧了，下载一个新的吧strong>
    noscript>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    在这里插入图片描述

    刚刚的过程总结

    执行了npm run serve,随后来到了src里面找到了main.js,引入了vue,引入App.vue,之后关闭啥啥不重要，于是乎找到了App，发现里面用到了school,student,于是乎把这个代码也执行了，执行最终汇总到了App里面，然后main里面引入了App，然后借助了我们还看不懂的render: h => h(App)代码反正就把App组件放入容器中了，然后就找到了index.html放到了div容器里面

    执行一下所有的代码

    在这里插入图片描述

    如果有以下相关报错，格式化相关的文档，重新打开即可

    在这里插入图片描述

    页面显示：

    在这里插入图片描述

    补充：

    1 输入没有路径提示的，可以安装Path Autocomplete这个插件

    2 问

    (1) 为什么main.js是入口文件？
    - 脚手架配置好的
    (2) main.js都还没有引入，为什么能找到这个容器？
    - 脚手架配置好的

    3.2 render函数

    render使用在main.js里面，先不使用，用之前自己的写法

    部分代码修改成原来的

    new Vue({
  el: '#app',
  // render: h => h(App),
  template:``,
  components: {App},
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    保存之后编译一下（上次的npm run serve 没关就会自动编译）

    浏览器报错

    在这里插入图片描述

    现在使用这两种办法解决

    3.2.1 引入完整版的vue（带有解析模板器的vue）

    分析代码：

    我们先ctrl+点击这个vue看看（一般引入都是./… /具体文件 ，但是，但是这里我们引入一个三方库的时候就写一个名字）

    在这里插入图片描述

    引入残缺版的vue,肯定不能解析模板

    我们现在引入完整版的vue

    完整版的在dist下面的vue.js
    vue/dist/vue

    // 简化版的main.js代码
import Vue from 'vue/dist/vue'
Vue.config.productionTip = false

new Vue({
  el: '#app',
  template:`
    你好啊
    `    ,
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    此时页面没有报错：
    (背景色不用在意，换了个护眼模式)
    在这里插入图片描述

    但是，为什么要设计残缺版的Vue呢

    3.2.2 render函数渲染

    此时这里就引入残缺版的vue，依然一解析模板就会报错

    我们可以使用render解决

    render 渲染

    先用下面这个写法

    import Vue from 'vue'
Vue.config.productionTip = false

new Vue({
  el: '#app',
  render(createElement){
    return createElement('h1','你好啊')
  }
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    此时页面显示了：你好啊

    但是上面这种写法肯定看起来是没有template好的

    我们再改写成 精简写法

    render里面没有用到this，就可以用箭头函数，箭头函数左边只有一个参数，就可以省略小括号，箭头函数里面只有一句函数体，还有return。

    精简代码如下：

    import Vue from 'vue'
Vue.config.productionTip = false

new Vue({
  el: '#app',
  // render(createElement){
  //   return createElement('h1','你好啊')
  // }
  // 精简版
  render:q => q('h1','你好啊')
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    你会发现精简版的跟main.js最初的那句很像

    render: h => h(App)

    这里写 App 往上一读，就要加上注释掉的:

    import App from './App.vue'

    现在就可以运行了，虽然是残缺版的vue，但是render帮我们渲染了

    /**
 * 该文件是整个项目的入口文件
 */
// 引入Vue (此处不用执行npm i vue，脚手架在node_modules安排的明明白白)
import Vue from 'vue'
// 引入App组件，它是所有组件的父组件
import App from './App.vue'
// 关闭vue的生产提示
Vue.config.productionTip = false

// 创建Vue实例对象---vm
new Vue({
  el: '#app',
  // 将App组件放入容器中
  render: h => h(App),
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    运行一下页面有了：

    在这里插入图片描述

    Vue团队为什么这么麻烦整出上面的东西？为什么不直接一个完整版的vue就行？

    先看一下这个文件夹，红色部分的js都是中间这个vue.js的精简版（带有runtime的都叫运行时vue）

    在这里插入图片描述

    Vue包含两个东西：核心+模板解析器

    如果不弄出上面各种vue版本，直接用完整版的vue，编写代码时，模板解析器会占整个代码体积的1/3，会很大，如果一直用这个完整版的vue,开发完后用webpack打包，里面包含很多东西，也包含vue模板解析器，但是代码写完后借助webpack已经把.vue文件翻译成.js,这个时候模板解析器就没用了

    所以vue官网就给了不包含模板解析器的vue,使用这个能让我们打包出来的文件小一些

    这里我们就用render解析了main.js里面的template

    要是解析.vue里面的标签类型的template呢？

    vue专门找了一个库帮我们解析，在package.json里面

    在这里插入图片描述

    3.3.3 关于不同版本的Vue

    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函数去指定具体内容。

    3.整个脚手架编写中，只有创建vm的时候才用一下render，其他的组件里面就不用它管了

    3.3 修改默认配置

    vue脚手架把所有那些重要的配置文件都隐藏了

    可以通过vue inspect > output.js这个命令，把脚手架默认的配置全部整理成一个.js文件给我们看

    在这里插入图片描述

    刚开始打开报错，我们可以在开头加上一个 const a =

    在这里插入图片描述

    那上面的操作不行，怎么修改默认配置呢？

    脚手架配置哪些可以改，哪些不可以改

    public文件夹布恩那个改。src不能改，底层默认配置就找他。main.js不能改

    官网提供了可以修改的
    在这里插入图片描述

    用的时候现用现查

    Vue CLI 配置参考

    修改默认配置

    例如：想让入口文件去src2里面找peiqi.js，怎么配置呢？

    1. 将官网的pages拿过来放在vue.config.js

    分析整体代码：

    在这里插入图片描述

    vue.config.js修改后代码：

    入口文件名也要修改成peiqi

    module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/peiqi.js',

    },
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    vue.config.js 一旦发生更改，就需要重新npm run serve

    运行一下正常结果时成功了

    我的错误了，目前没有找到原因😥😥,只能先还原到没有修改之前。这个先放置一下，应该问题不大

    总结：vue.config.js配置文件

    1. 使用vue inspect > output.js可以查看到Vue脚手架的默认配置。
    2. 使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

    3.4 ref属性

    ref属性：一个特殊的标签属性

    1. 被用来给元素或子组件注册引用信息（id的替代者）
    2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
    3. 使用方式：
      1. 打标识：

        .....

        或
      2. 获取：this.$refs.xxx

    3.4.1 前言

    如果整个脚手架学习代码都放在src里面就没法看了，所以我们可以：

    把src备份一下，编个名字 01_src_分析脚手架，把前面学的写的代码放在这个里面

    在这里插入图片描述

    如果之后要看这个，就把这个名字改成src,再 npm run serve 就可以看了

    现在就可以随意操作src(由于刚刚写的已经备份到了01，这个可以写新的内容)

    3.4.2 基本代码书写

    能规范的有条理自己写一遍

    1. 先创建文件，在src下，main.js, App.vue, 文件夹 components,components下一个School.vue组件
    2. 书写代码

    1 main.js

    // 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 关闭Vue的生产提示
Vue.config.productionTip = false

// 创建vm
new Vue({
    el:'#app',
    render: h => h(App)
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    2 School.vue

    批量生成代码

    





    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    3 App.vue

    



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    npm run serve 运行一下

    在这里插入图片描述

    3.4.3 ref属性

    在App里面加一些功能

    修改一下刚刚的 App.vue

    




    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    在这里插入图片描述

    成功获取DOM元素

    在这里插入图片描述

    注意：有的时候报错但是觉得代码没错可以试试刷新一下浏览器

    前端小帕菜还在努力码代码中，加油！！！！v🍖🍗🥩

  • 相关阅读:
    低代码引擎 TinyEngine 正式发布！！！
    haproxy搭建web集群
    单独使用logback作为日志
    IDEA点击RUN后后台到底执行了什么操作
    25、ESP8266的AP模式跟Station模式代码实现
    微信小程序实现微信支付的相关操作设置
    Jenkins一站成魔【1】传统安装与说明
    XPS数据分析问题收集及解答-科学指南针
    Leetcode131. 分割回文串
    IPV6工作手册
  • 原文地址：https://blog.csdn.net/weixin_51249285/article/details/127796453