Vue import from省略后缀/加载文件夹的方法/实例详解

Vue import from省略后缀

在Vue开发中，使用import语句将其他文件引入到当前文件中时，经常需要写上文件的后缀名。但是有时候我们希望可以省略后缀名，这时只需要在webpack的resolve配置中设置extensions选项即可。

// webpack.config.js
module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.css', '.less']
  }
}

上面的配置表示，在引入文件时，如果没有写上后缀名，Webpack会自动按照extensions数组的顺序添加后缀名查找。所以，在使用import语句时就可以不必写后缀名了。

import MyComponent from './MyComponent'      // MyComponent.vue
import myMixin from './myMixin'              // myMixin.js

加载文件夹的方法

在Vue开发中，我们有时候需要将一个文件夹内的所有组件或模块都引入进来，这时我们可以使用Webapck的require.context方法。

该方法接收三个参数：directory，useSubdirectories和regExp，在directory指定的目录下寻找符合regExp正则表达式的文件，useSubdirectories指定是否包含子目录。

const requireComponent = require.context('./components', true, /\.vue$/)

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)
  const componentName = fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
  Vue.component(componentName, componentConfig.default || componentConfig)
})

上面的代码中，我们首先通过require.context将./components文件夹下的所有以.vue结尾的文件引入，并通过Vue.component注册为全局组件。

实例详解

下面是一个完整的Vue项目的目录结构：

├── src
│   ├── assets
│   ├── components
│   │   ├── HelloWorld.vue
│   ├── router.js
│   ├── main.js
│   ├── App.vue
│   └── views
│       ├── Home.vue
│       ├── About.vue
│       └── Login.vue
└── package.json

其中，App.vue是根组件，Home.vue、About.vue、Login.vue均为路由组件，HelloWorld.vue是公共组件。

router.js中定义了路由映射：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
import Login from './views/Login.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/login', component: Login }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

我们通过Vue.use(VueRouter)安装VueRouter插件，并将路由映射定义在routes数组中。使用const router = new VueRouter({})创建路由实例并导出。这样，在main.js中就可以将路由实例注入到Vue实例中：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

上面的代码中，我们创建了一个Vue实例，并将router实例注入到Vue实例中。这样，在App.vue组件中就可以访问到$route和$router了。例如，在App.vue中展示当前的路由：

<template>
  <div>
    <h1>{{ $route.path }}</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {}
</script>

这样，我们就实现了一个简单的 Vue 应用，相信这些方法可以帮助你更加高效地进行 Vue 开发。