詳談Vue.js框架下main.js,App.vue,page/index.vue之間的區(qū)別
如下所示：
1.index.html文件入口；
2.src放置組件和入口文件；
3.node_modules為依賴的模塊；
4.cofig中配置了路徑端口值等；
5.build中配置了webback的基本配置、開(kāi)發(fā)環(huán)境配置、生產(chǎn)環(huán)境配置等。
main.js是我們的入口文件，主要用于初始化vue實(shí)例，并使用需要的插件。
App.vue是我們的主組件，所有的頁(yè)面都在App.vue下進(jìn)行切換。我們可以將router標(biāo)示為App.vue的子組件。
6.在每個(gè)模板中給style設(shè)置一個(gè)scoped屬性，意為該style的屬性只對(duì)這個(gè)組件起作用，不會(huì)影響到其他組件中含有相同class的元素。
補(bǔ)充知識(shí)：VUE 路由配置(包含main.js index.js APP.vue 三大配置)
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/Login'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/Login',
name: 'Login',
component: Login
},
{
path:"/login1",
component:() => import('@/components/login1.vue')
}
],
mode: "history"http://干掉地址欄里邊的#號(hào)鍵
})
App.vue 展示Vue
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
}
}
}
</script>
<style>
</style>
以上這篇詳談Vue.js框架下main.js,App.vue,page/index.vue之間的區(qū)別就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
熱力圖是一種數(shù)據(jù)可視化技術(shù),它使用顏色來(lái)表示數(shù)據(jù)點(diǎn)的值,熱力圖常用于可視化分布數(shù)據(jù),例如人口密度、溫度變化或網(wǎng)站流量,本文給大家介紹了如何使用Vue3和ApexCharts創(chuàng)建交互式熱力圖,需要的朋友可以參考下2024-06-06
一步步教你搭建VUE+VScode+elementUI開(kāi)發(fā)環(huán)境
這篇文章主要給大家介紹了關(guān)于搭建VUE+VScode+elementUI開(kāi)發(fā)環(huán)境的相關(guān)資料,近期被配置環(huán)境的事情弄得整個(gè)人都要炸了,現(xiàn)在整理如下,希望有相同需求的朋友可以不用走彎路,需要的朋友可以參考下2023-07-07
vue項(xiàng)目本地開(kāi)發(fā)使用Nginx配置代理后端接口問(wèn)題
這篇文章主要介紹了vue項(xiàng)目本地開(kāi)發(fā)使用Nginx配置代理后端接口問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue2中使用less簡(jiǎn)易教程，由于不需要手動(dòng)配置webpack，所以vue中使用less是非常簡(jiǎn)單的，只需要安裝less，less-loadder就ok了2018-03-03
vue 全選與反選的實(shí)現(xiàn)方法(無(wú)Bug 新手看過(guò)來(lái))
下面小編就為大家分享一篇vue 全選與反選的實(shí)現(xiàn)方法(無(wú)Bug 新手看過(guò)來(lái))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue中provide和inject的用法及說(shuō)明(vue組件爺孫傳值)
這篇文章主要介紹了vue中provide和inject的用法及說(shuō)明(vue組件爺孫傳值)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue多級(jí)復(fù)雜列表展開(kāi)/折疊及全選/分組全選實(shí)現(xiàn)
這篇文章主要介紹了vue多級(jí)復(fù)雜列表展開(kāi)/折疊及全選/分組全選實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
vue如何實(shí)現(xiàn)el-select下拉選項(xiàng)的懶加載
這篇文章主要介紹了vue如何實(shí)現(xiàn)el-select下拉選項(xiàng)的懶加載，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue中使用svg封裝全局消息提示組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue3使用vue-router及路由權(quán)限攔截方式
這篇文章主要介紹了vue3使用vue-router及路由權(quán)限攔截方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04