詳談Vue.js框架下main.js,App.vue,page/index.vue之間的區別
阿新 • • 發佈:2020-08-13
如下所示:
1.index.html檔案入口;
2.src放置元件和入口檔案;
3.node_modules為依賴的模組;
4.cofig中配置了路徑埠值等;
5.build中配置了webback的基本配置、開發環境配置、生產環境配置等。
main.js是我們的入口檔案,主要用於初始化vue例項,並使用需要的外掛。
App.vue是我們的主元件,所有的頁面都在App.vue下進行切換。我們可以將router標示為App.vue的子元件。
6.在每個模板中給style設定一個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"//幹掉位址列裡邊的#號鍵 })
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,page/index.vue之間的區別就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。