1. 程式人生 > >Vue入口文件main.js

Vue入口文件main.js

run 入口 modules onf lse str rom alt com

// 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/>‘ })

1.首先我們來看第一句代碼:

import Vue from ‘vue‘

然而在我們的項目目錄中並沒有Vue這個文件,

技術分享圖片

那麽這個Vue文件又是哪裏來的呢?

其實最完整的寫法是:
import Vue from "../node_modules/vue/dist/vue.js";

意思是:因為main.js是在src文件中,所以../向前一級相對目錄查找node_modules,再依次尋找後面的文件。

文件找到了,那麽文件內是否存在Vue呢?

(function (global, factory) {
  
typeof exports === ‘object‘ && typeof module !== ‘undefined‘ ? module.exports = factory() : typeof define === ‘function‘ && define.amd ? define(factory) : (global = global || self, global.Vue = factory());####在這裏我們找到了Vue }(this, function () { ‘use strict‘;

2.我們再看看第二、三行代碼

import App from ‘./App‘
import router from ‘./router‘

其實在這句代碼中省略了後綴名,完整的代碼應該是:

import App from ‘./App.vue‘
import router from ‘./router.js‘


在文件引入時,我們通常可以省略後綴名,而Vue會自動幫我們添加上‘.js‘\‘.vue‘\‘.less‘等後綴名,去幫我們匹配相應的文件。(vue文件是Vue框架的單文件組件。)

Vue入口文件main.js