本文详细介绍了如何使用Vue CLI初始化脚手架，包括Vue 2.x版本的选择，项目的创建步骤，以及分析Vue项目的目录结构。重点讲解了`main.js`作为入口文件的角色，`render`函数的使用，以及`ref`属性在获取元素和组件实例中的应用。此外，还涉及了Vue CLI的配置修改，如自定义入口文件，以及`vue.config.js`的简单使用。
文章目录
使用Vue脚手架
Vue上一篇学习笔记2见https://blog.csdn.net/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不能改
官网提供了可以修改的
用的时候现用现查
修改默认配置
例如：想让入口文件去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）
- 使用方式：
- 打标识：
<h1 ref="xxx">.....</h1>或<School ref="xxx"></School> - 获取：
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>
成功获取DOM元素
注意：有的时候报错但是觉得代码没错可以试试刷新一下浏览器
405
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
