Vue，简洁方式开发web，仅添加vue.js文件，不使用全家桶

index.html主页引入main.js
main.js引入App.js
也就是套娃——简单的不要不要的

index.html里面引入文件[注意这里有个div id =“app”]

<body><div id="app"></div><script src="./lib/vue.js"></script><script src="./src/main.js" type="module"></script>
</body>

main.js文件里面引入App.js里面的代码↑↑↑

import App from "./App.js";
new Vue({components: {App},template: `<App />`,
}).$mount("#app");

App.js文件里面的代码↑↑↑

var template = `<div><h1> 根组件 </h1>
</div > `;
export default {template,
};

Index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"></div><!-- 引用我们自己的js --><script src="./lib/vue.js"></script><!-- 引入vue.js文件  --><script src="./src/main.js" type="module"></script><!-- 引用我们自己的js[main.js] 模块化引入加上type="module" -->
</body>
</html>

main.js

// [main.js]组件只负责创建Vue，然后加载根组件[App.js]// 导入App.js组件
// import App from "./App.js"创建Vue实例
.$mount("#app")意思就是把这个挂载到id为app的元素里面
new Vue({}).$mount("#app");//方式一，旧方式
var vm = new Vue({}).$mount("#app");//方式二【创建并加工】
// 方式三【分开创建加工】
var vm = new Vue({})
vm.$mount("#app");给Vue实例添加注册new Vue({}).$mount("#app");//未注册组件的样式
new Vue({compomemts:{App},}).$mount("#app");//添加注册之后// 导入App.js组件
import App from "./App.js";// 添加模板
new Vue({components: {App},template: `<App />`,}).$mount("#app");

app.js

// 编写下面export里面的template
// 注意下面<div>两端包裹的是esc键下方的【`】
var template = `<div><h1> 根组件 </h1></div > `;
// 根组件 这个组件代表整个网页
// export default{};
// 导出这个template  一般这个template写在上面 【先设置变量，再导出】和python相似
export default {template, };

然后拓展来说一下这个app.js里面的可以变化的

import App from "./App.js";
new Vue({components: {App},template: `<App />`,}).$mount("#app");

// 这种方式叫做生成组件 h(App) ，里面的App 就是组件
// 这组件是一个虚拟节点
//（也就是这个组件本来就是虚拟节点，生成的组件也是虚拟节点）
// 这里生成一个组件，以组件作为一个虚拟节点，然后传过去
import App from "./App.js";
new Vue({components: {App},render (h){return h(App);},
}).$mount("#app");

es6简洁写法，写成一行

import App from "./App.js";
new Vue({components: {App},render :(h) => h(App),}).$mount("#app");

Vue，简洁方式开发web，仅添加vue.js文件，不使用全家桶相关推荐

视频教程-德国Vue.js2终极开发教程（含Vue路由和Vuex）-Vue
德国Vue.js2终极开发教程(含Vue路由和Vuex) * Academind GmbH创始人,当前生活在德国慕尼黑 * 从15岁开始进入开发领域,前后端技术均很精通,毕业于慕尼黑大学硕士学位 * ...
德国Vue.js2终极开发教程（含Vue路由和Vuex）-Max-专题视频课程
德国Vue.js2终极开发教程(含Vue路由和Vuex)-808人已学习课程介绍新手入门现代前端开发的不二选择课程目标: * 学会从简单到复杂企业级应用的VueJS程序编写方法 ...
weblogic下开发web项目时修改java文件不用重启的绿色方法，不用修改weblogic的配置文件、不用jar...
2019独角兽企业重金招聘Python工程师标准>>> weblogic下开发web项目时修改java文件不用重启的绿色方法,不用修改weblogic的配置文件.不用jar ...
vue项目引入不符合ES6模块化标准的JS文件
vue项目引入不符合ES6模块化标准的JS文件实现方式实现原理实现方式要引入的文件放在public目录下,在index.html中通过script标签引入实现原理参考vue官网–处理静态资 ...
vue上传录音_vue中添加mp3音频文件的方法
有的时候我们需要在vue中添加音频文件,但是直接将音频文件放置了assets目录下的时候,会发现并不能正常播放,下面是两种常用的配置方法: 方法一.将音频文件放置在static目录中,然后进行调用,如 ...
vue使用render函数自定义标签动态导入js文件
文章目录问题背景解决思路知识加油站 Render函数 createElement参数代码实现问题背景项目中需要引入国网思极地图,但是因为pc端的项目一般都是部署到内网.该项目要同时部署到2 ...
JS文件中加载jquery.js(JS文件添加其他JS文件)
最近有一个需求: 1.在一个html中只能引入一个JS文件不能有JS代码和其他JS文件的引入 2.这个JS文件中还要引入其他的JS文件 3.所有JS功能都写在这个JS文件中这些代码用到了jque ...
组件方式开发 Web App全站学习视频分享
Vue项目中城市下拉选择城市js文件
/** @Author: taoshiwei* @Date: 2019-04-09 14:38:13* @Last Modified by: taoshiwei* @Last Modified tim ...

Vue，简洁方式开发web，仅添加vue.js文件，不使用全家桶

Vue，简洁方式开发web，仅添加vue.js文件，不使用全家桶相关推荐

最新文章

热门文章