Vue main.js各种写法和含义

遇到的main.js的三种写法：

第一种：

通过webpack 初始化的项目

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})

el：'#app'，意思是将所有视图放在id值为app这个dom元素中

components：表明引入的文件

这里的意思是将App.vue放到#app中，然后以<App/>来指代我们的#app。

第二种：

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './router/router'
import store from './store/'
import {routerMode} from './config/env'Vue.use(VueRouter)new Vue({router,store,
}).$mount('#app')

这里的意思是加载一#app为名字的节点，而在这里这个app名字的节点是在index.html文件中。

第三种

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import store from './store'Vue.config.productionTip = falseVue.use(VueRouter);
// 引入Mint-ui
Vue.use(MintUI)// 消除点击延迟
const FastClick = require('fastclick')
FastClick.attach(document.body)
// donenew Vue({router,store,render: h => h(App)
}).$mount('#app')

这里的h 代表的是 hyperscript 。缩写为 h 是因为它更容易去输入。可以认为它是 createElement 的缩写。原本那位 return h(App);通过使用 ES6 缩短为：render: h => h (App)。

关键点

main.js 与index.html的关联

Webpack 会在每次打包后将 entry 文件的路径写入这个模板指定的位置并生成一个新的 index.html 放到 dist 目录（这个行为本身是在 Webpack 配置中定义的，不是 Webpack 的默认行为）。实际上 main.js 也是关联了 index.html 的，只不过这个关联 Webpack 帮你做了。

Vue main.js各种写法和含义相关推荐

vue main.js 引入全局 js 统一导入 js
main.js 代码 // 导入axios import axios from axios // 添加到 vue 的 this 属性上(全局使用) Vue.prototype.axios = axio ...
vue main.js中引入js_web前端的同学不容错过，大厂Vue最佳实践总结，提高竞争力...
随着这几年前端技术的快速发展,Vue框架在国内普及率极高,人人都会用.那么,如何才能写得比别人优雅?比别人漂亮? 鉴于一线互联网大厂在前沿技术领域的持续研究和大规模投入,直接向他们取经,是最便捷也是最 ...
vue main.js中引入js_手把手教你深入Vue3.0(Vue-cli4)项目打包性能优化实践
记录了自己的博客在禁用缓存的情况下,从八九秒加载时间到最终985ms的优化实践,开启缓存的情况下能达到138ms的访问速度本人的个人博客采用的是Vue-cli4.1.2 + typescript构建 ...
vue main.js 导入文件报错Module build failed: Error: No PostCSS Config found in:
坑了一早上 https://blog.csdn.net/qq_41831345/article/details/80636053 转载于:https://www.cnblogs.com/yuangul ...
vue.js和vue.main.js下载地址
https://v2.vuejs.org/v2/guide/installation.html.
前端实现div标签p标签等吸顶效果【Vue+原生JS组合写法】
vue引用js文件的多种方式
本文主要介绍了vue引用js文件的多种方式,本文大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 1.vue-cli webpack全局引入jquery (1) 首先 npm inst ...
vue引用js文件的多种方式(推荐)
vue引用js文件的多种方式(推荐) Day_by_day93 这篇文章主要介绍了vue引用js文件的多种方式,本文大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 1.vue-cli ...
说一说实战项目升级从vue2到vue3 之main.js 区别
相信很多人都对尤大口中的vue3蠢蠢欲动许久了,但是很多人就是一头雾水没法下手,不知道改怎么搞,或者怕项目升级报错什么的. 我自己的成功的把项目进行升级了,所以想简单记录一下. 简而言之首先就是版本嘛 ...

Vue main.js各种写法和含义

Vue main.js各种写法和含义

遇到的main.js的三种写法：

第一种：

第二种：

第三种

关键点

main.js 与index.html的关联

Vue main.js各种写法和含义相关推荐

最新文章

热门文章