文章目录
使用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元素
注意:有的时候报错但是觉得代码没错可以试试刷新一下浏览器