詳談Vue.js框架下main.js,App.vue,page/index.vue之間的區(qū)別
更新時間：2020年08月12日 14:19:16 作者：Ccc1929969359
這篇文章主要介紹了詳談Vue.js框架下main.js,App.vue,page/index.vue之間的區(qū)別，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
如下所示：
1.index.html文件入口；
2.src放置組件和入口文件；
3.node_modules為依賴的模塊；
4.cofig中配置了路徑端口值等；
5.build中配置了webback的基本配置、開發(fā)環(huán)境配置、生產(chǎn)環(huán)境配置等。
main.js是我們的入口文件，主要用于初始化vue實例，并使用需要的插件。
App.vue是我們的主組件，所有的頁面都在App.vue下進行切換。我們可以將router標示為App.vue的子組件。
6.在每個模板中給style設(shè)置一個scoped屬性，意為該style的屬性只對這個組件起作用，不會影響到其他組件中含有相同class的元素。
補充知識：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://干掉地址欄里邊的#號鍵
})
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ū)別就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
熱力圖是一種數(shù)據(jù)可視化技術(shù),它使用顏色來表示數(shù)據(jù)點的值,熱力圖常用于可視化分布數(shù)據(jù),例如人口密度、溫度變化或網(wǎng)站流量,本文給大家介紹了如何使用Vue3和ApexCharts創(chuàng)建交互式熱力圖,需要的朋友可以參考下2024-06-06
一步步教你搭建VUE+VScode+elementUI開發(fā)環(huán)境
這篇文章主要給大家介紹了關(guān)于搭建VUE+VScode+elementUI開發(fā)環(huán)境的相關(guān)資料,近期被配置環(huán)境的事情弄得整個人都要炸了,現(xiàn)在整理如下,希望有相同需求的朋友可以不用走彎路,需要的朋友可以參考下2023-07-07
vue項目本地開發(fā)使用Nginx配置代理后端接口問題
這篇文章主要介紹了vue項目本地開發(fā)使用Nginx配置代理后端接口問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue2中使用less簡易教程，由于不需要手動配置webpack，所以vue中使用less是非常簡單的，只需要安裝less，less-loadder就ok了2018-03-03
vue 全選與反選的實現(xiàn)方法(無Bug 新手看過來)
下面小編就為大家分享一篇vue 全選與反選的實現(xiàn)方法(無Bug 新手看過來)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue中provide和inject的用法及說明(vue組件爺孫傳值)
這篇文章主要介紹了vue中provide和inject的用法及說明(vue組件爺孫傳值)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue多級復(fù)雜列表展開/折疊及全選/分組全選實現(xiàn)
這篇文章主要介紹了vue多級復(fù)雜列表展開/折疊及全選/分組全選實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
vue如何實現(xiàn)el-select下拉選項的懶加載
這篇文章主要介紹了vue如何實現(xiàn)el-select下拉選項的懶加載，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細介紹了vue中使用svg封裝全局消息提示組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue3使用vue-router及路由權(quán)限攔截方式
這篇文章主要介紹了vue3使用vue-router及路由權(quán)限攔截方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04