目录
1. vue的HelloWorld项目结构分析
使用vue create vue-project
创建的HelloWorld项目结构如下:
- public/favicon.ico: 文件位置和名称不要修改
- public/index.html:首页,文件位置和名称不要修改。谷歌浏览器可以在
chrome://settings/content/javascript
设置关闭javascript功能进行测试。不需要我们自己在index.html引入vue.js和main.js,脚手架会自动帮我们引入
<!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">
<!-- 配置页签图标。BASE_URL就是public目录 -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 配置网页标题。通过webpack插件从package.json加载项目name -->
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<!-- 如果浏览器不支持js,则显示这句话 -->
<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>
- src目录:目录位置和名称不要修改
- src/main.js:这个项目的程序入口文件,文件位置和名称一般不要修改。有的项目会命名为app.js或index.js。也可以使用
import App from './App'
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App), // render函数将App组件放入容器中
}).$mount('#app') // 和id=app的容器绑定
- src/components/App.vue:所有组件的父组件。这里
export default
使用的是默认暴露,还有分别暴露和统一暴露
<template>
<div id="app">
<!-- logo图片 -->
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
- babel.config.js:babel的配置文件。里面的内容一般用官方提供的配置就可以了
- package.json:项目的描述和配置文件。如下描述了项目名称、版本、脚本命令(build: 将.vue文件编译成html、css、js文件;init: 语法检查)、dependencies依赖
{
"name": "vue-project",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14"
},
......省略部分......
}
- package-lock.json:依赖包的管理,比如版本管理
2. 实现自己的一个简单Vue应用
public/index.html和src/main.js我们使用前面创建的项目的
删除src/App.vue、src/components/HelloWorld.vue组件,然后我们新建我们自己的组件
2.1 src/components/School.vue组件
需要在vue.config.js中添加lintOnSave: false
关闭语法检查。或者name属性用MySchool等名称,不然会报错
<template>
<div class="demo">
<h2>学校名称:{{name}}</h2>
</div>
</template>
<script>
export default {
name:'School',
data(){
return {
name:'第一中学'
}
}
}
</script>
<style>
.demo{
background-color: orange;
}
</style>
2.2 src/components/Student.vue组件
<template>
<div>
<h2>学生姓名:{{name}}</h2>
</div>
</template>
<script>
export default {
name:'Student',
data(){
return {
name:'张三'
}
}
}
</script>
2.3 src/App.vue组件
<template>
<div>
<img src="./assets/logo.png" alt="logo">
<School></School>
<Student></Student>
</div>
</template>
<script>
// 引入组件
import School from './components/School.vue'
import Student from './components/Student.vue'
export default {
name:'App',
components:{
School,
Student
}
}
</script>
2.4 测试
运行程序,页面如下:
3. render函数的理解
main.js的内容如下:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
import Vue from 'vue'
导入的这个是vue的runtime build,由vue/package.json的module属性值dist/vue.runtime.esm.js决定,不包含template解析器。可以使用如下方法之一进行解决
- 可以换成:
import Vue from 'vue/dist/vue'
。使用完整版的vue - 可以使用render函数: render: h => h(App)。由render函数帮我们进行main.js的template解析
render函数的基本使用
- render由vue帮我们自动调用,会传入一个createElement函数进行template解析。而其它组件的template解析,由项目定义的package.json的devDependencies的vue-template-compiler进行解析
- 如果是App组件,直接传入App组件,就相当于注册App组件然后使用App组件
import Vue from 'vue'
Vue.config.productionTip = false
new Vue({
// render: h => h(App)
render(createElement) {
return createElement('h1', '你好啊')
}
}).$mount('#app')
页面显示如下:
vue/dist目录说明:
vue/dist的目录如下:
- vue.common.xxx: 使用common.js进行模块化时使用
- vue.runtime.esm.js:Vue默认让我们使用vue.runtime.esm.js,这个包含vue的核心功能,但是不包含template解析器,因为template解析只需要在编译的时候使用,而运行的时候不需要,可以减少打包后的文件大小
- vue.runtime.js:vue.runtime.esm.js不能直接在浏览器运行,因为有ES6语法,浏览器解析不了。而vue.runtime.js可以直接在浏览器运行。如下所示。单独的一个html文件,引用了vue.runtime.js,直接运行,浏览器显示hello
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javaScript" src="./node_modules/vue/dist/vue.runtime.js"></script>
</head>
<body>
<div id="root">
</div>
<script type="text/javascript">
new Vue({
el:'#root',
render(h){
return h('h1', 'hello')
}
})
</script>
</body>
</html>
- vue.runtime.mjs:在vue.runtime.js上进行了压缩
4. 修改main.js名称为app.js
Vue的项目底层还是用webpack进行打包的,webpack的配置文件是webpack.config.js,这个配置文件我们访问不到
可以使用命令查看这个配置文件的内容
D:\正使用文件\vue-project>vue inspect > test.js
D:\正使用文件\vue-project>
test.js的文件内容如下。可以看到默认的程序入口,就是src/main.js
{
......省略部分......
entry: {
app: [
'./src/main.js'
]
}
}
在Vue中我们可以通过vue.config.js对webpack的一些配置进行配置。能配置的参数参考vue-cli配置参考页面
修改main.js为app.js的配置如下。该js文件使用的是common.js模块化语法。修改后需要重新运行cnpm run serve
命令重启服务
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
pages: {
index: {
entry: 'src/main.js'
}
}
})