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

最新推荐文章于 2025-09-09 09:11:49 发布

原创最新推荐文章于 2025-09-09 09:11:49 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Vue 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了如何使用Vue CLI初始化脚手架，包括Vue 2.x版本的选择，项目的创建步骤，以及分析Vue项目的目录结构。重点讲解了`main.js`作为入口文件的角色，`render`函数的使用，以及`ref`属性在获取元素和组件实例中的应用。此外，还涉及了Vue CLI的配置修改，如自定义入口文件，以及`vue.config.js`的简单使用。

文章目录

使用Vue脚手架

使用Vue脚手架

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

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

3.1 初始化脚手架

3.1.1 说明

Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）
- 写.vue文件，要是没有脚手架，浏览器是不会认的。
最新的版本是 4.x
- 这个4 版本是脚手架，不是vue版本 vue版本 1，2，3，目前学的2，学好了2，3是在2上一丢丢升级改造。脚手架一般选最新的版本4，它是向下兼容的.
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组件

在这里插入图片描述

备注：

如出现下载缓慢请配置 npm 淘宝镜像：npm config set registry https://registry.npm.taobao.org
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：包版本控制文件

下面分析的文件按照 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),
})

App.vue

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

App.vue

// 结构
<template>
  <div id="app">
    <!-- 这个assets文件夹经常出现，一般放一些静态资源 -->
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

// 交互
<script>
// components 组件们 所有写出来的组件都往这个文件夹放，除了App.vue
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

// 样式
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

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

3 public

index.html

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

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 -->
    <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>
    <!-- 当浏览器不支持js时noscript中的元素就会被渲染 -->
    <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>
    <!-- built files will be auto injected -->
  </body>
</html>

使用这个BASE_URL 不用之前那种./ …/ 的路径写法是防止项目部署后可能会出现路径错误问题，这里使用个BASE_URL指的就是public下的文件（底层设置好了）
htmlWebpackPlugin.options.title 写这个功能是：它默默来到package.json里面找到name作为网站的标题。这个是通过webpack里面的一个插件完成的
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>Document</title>
</head>
<body>
    <h1>你好啊</h1>
    <noscript>
        <strong>不好意思，你的浏览器不支持js有点旧了，下载一个新的吧</strong>
    </noscript>
</body>
</html>

在这里插入图片描述

刚刚的过程总结

执行了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:`<App></App>`,
  components: {App},
})

保存之后编译一下（上次的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:`<h1>你好啊</h1>`,
})

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

但是，为什么要设计残缺版的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','你好啊')
  }
})

此时页面显示了：你好啊

但是上面这种写法肯定看起来是没有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','你好啊')
})

你会发现精简版的跟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),
})

运行一下页面有了：

在这里插入图片描述

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，怎么配置呢？

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

分析整体代码：

在这里插入图片描述

vue.config.js修改后代码：

入口文件名也要修改成peiqi

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

    },
  }
}

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

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

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

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

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

3.4 ref属性

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

被用来给元素或子组件注册引用信息（id的替代者）
应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
使用方式：
1. 打标识：<h1 ref="xxx">.....</h1>或 <School ref="xxx"></School>
2. 获取：this.$refs.xxx

3.4.1 前言

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

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

在这里插入图片描述

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

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

3.4.2 基本代码书写

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

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

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)
})

2 School.vue

<v 批量生成代码

<template>
  <div class="school">
    <h2>学校名称：{{ name }}</h2>
    <h2>学校地址：{{ address }}</h2>
  </div>
</template>

<script>
export default {
  name: "School",
  data() {
    return {
      name: "尚硅谷",
      address: "北京·昌平",
    };
  },
};
</script>

<style>
.school {
  background-color: orange;
}
</style>

3 App.vue

<template>
  <div>
    <School></School>
    <School />
    <School />
    <School />
  </div>
</template>

<script>
    // 引入School组件
    import School from "./components/School.vue";

    export default {
        name: "App",
        components: { School },
    };
</script>

npm run serve 运行一下

在这里插入图片描述

3.4.3 ref属性

在App里面加一些功能

修改一下刚刚的 App.vue

<template>
  <div>
    <!-- 原生里面获取DOM元素，用ID，我们这里用ref-->
    <!-- <h1 v-text="msg" id="title"></h1> -->
    <h1 v-text="msg" ref="title"></h1>
    <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
    <School ref="sch" />
  </div>
</template>

<script>
    // 引入School组件
    import School from "./components/School.vue";

    export default {
        name: "App",
        components: { School },
        data() {
            return {
                msg: '欢迎学习Vue!'
            }
        },
        methods: {
            showDOM(){
                // 原生写法
                // console.log(document.getElementById('title'));
                // 查看一下 vc(可以发现DOM元素在vc下面的$refs里面)
                // console.log(this);
                console.log(this.$refs.title); // 真实DOM元素
                console.log(this.$refs.btn);  // 真实DOM元素
                console.log(this.$refs.sch); // School组件的实例对象（vc）
                console.log(this.$refs);
            }
        },
    };
</script>

在这里插入图片描述