vue的HelloWorld项目结构分析、实现自己的一个简单Vue应用、render函数的理解、修改main.js名称为app.js
导入的这个是vue的runtime build，由vue/package.json的module属性值dist/vue.runtime.esm.js决定，不包含template解析器。Vue的项目底层还是用webpack进行打包的，webpack的配置文件是webpack.config.js，这个配置文件我们访问不到。在Vue中我们可以通过vue.config.js对webpack的一些配置进行配
·
目录
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'
}
}
})
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
12
0- 0
已为社区贡献7条内容
所有评论(0)