修炼Vue-模块化

上一篇：修炼Vue-组件化

一、模块化简介

由于前端代码越来越复杂，相互之间的js文件可能会相互影响导致出现问题，因此有了模块化的概念

模块化即将不同的文件分成一个一个模块，一个模块中的变量只能自己模块中使用

其他模块需要使用本模块中的变量需要本模块导出，其他模块导入两个步骤

1. 前期的模块化

这时需要我们手动来书写模块化的代码，使用的是以下两种方式

• 使用es5的导入和导出
• CommonJS(了解)

2. es6的模块化语法

（这里是vue的学习，因此其他内容不多赘述）

导入：import {xxx} from 'xxx.js'

导出：export let a='xxx'

二、模块化打包工具

webpack是一个现代Javascript应用程序的模块打包器（module bundler），分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，Less、TypeScript等），并将其打包为合适的格式以供浏览器使用。

webpack的入门使用

webpack零碎知识

三、webpack配置vue

1. 下载vue并引入

下载：

npm vue --save

引入：

//在入口文件中引入
import Vue from 'vue'

2. 编写vue相关代码

按照webpack的运行方式编写代码，此时我们应该是：

• 在入口文件中加载vue实例：

  • const Vue = new Vue({
           
        el:'#app',
        data:{
           
            msg:'hello vue!'
        }
    })
    

• 在html文件中写上

  • <div id="app">{
          {msg}}</div>
    

此时打包运行，会报一个错误，

You are using the runtime-only build of Vue where…

这是因为，vue在发布的时候发布了两个版本。

1. runtime-only

   1. 代码中不允许有任何template

2. runtime-compiler

   1. 代码中可以有template
   2. 有compiler可以用于编译template

所以我们需要更改使用的vue版本。

• 在webpack.config.js中加入

  • resolve:{
           
        
        //更改版本
        alias:{
           
            'vue$':'vue/dist/vue.esm.js'
        },
        //以下可不配，仅方便我们后面写文件路径的时候可以省去后缀名
        extensions:['.js','.vue','.css']
    }
    

  • 意思是在node_modules文件夹中找到vue中的dist文件中的vue.esm.js文件运行

• 但是开发中，主html文件我们是基本不动他的，因此vue实例的模板我们需要换一个地方写

  • 在入口文件中实例化vue时，加上需要写的模板