vue-loader的概念

其他loader:css-loader、url-loader、html-loader等
先来了解一下模块的概念,比如在nodeJS中,有requireexports关键字。

很早有个broserify,是个js模块加载器。
现在流行的是webpack,因为它不光你能加载js文件,还可以是css文件或图片等资源。
webpack,我们可以认为也是更加高级的模块假期,围绕它一切东西都是模块。

这些loader是干嘛的?
我们知道在html中,我们引入css文件是link标签,
但比如我们需要

require('style.css')
   
   
  • 1

这还是不太逆天了?其实这就是需要css-loader来处理了。

在Vue开发中,有.vue文件,vue-loader就是用来加载这类文件的,然后在通过webpack打包编译成我们浏览器认识的代码。vue-loader是基于webpack的。

.vue文件

.vue文件就是放置vue的组件代码,结构如下:

<template>
 //html
</template>

<style>
//css
</style>

<script>
//js
</script>
   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

项目目录结构

webpack是模块分开写,最后打包在一起。
简单的目录结构如下:

|-index.html
|-main.js 入口文件
|-App.vue vue文件
|-package.json 工程文件(项目依赖、名称、配置),npm init –yes 生成此文件
|-webpack.config.js webpack的配置文件

1.执行:npm init --yes
这里写图片描述
执行成功之后,项目目录结构如下:
这里写图片描述

2.webpack配置文件webpack.config.js,内容如下:

module.exports = {
    //入口文件
    entry:'./main.js', 

    //出口
    output:{
        path:__dirname,
        filename:'build.js' //打包之后的文件,html模板中引入此文件
    },
};
   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

webpack准备工作

下载安装:

npm install webpack --save -dev
npm install webpack-dev-server --save -dev
   
   
  • 1
  • 2

安装完成之后,根目录下就会多一个node_modules文件夹,其中有n多子文件夹。

因为我们前面已经写好了webpack所需的配置文件,这时候在终端执行命令:webpack 就会生成build.js 文件
这里写图片描述
但在实际开发中,为了更加方便,我们可以做如下配置,修改工程文件package.json添加scripts:

  "scripts": {
    "dev": "webpack-dev-server --inline --hot",
    "b": "webpack"
  },
   
   
  • 1
  • 2
  • 3
  • 4

这样我们只需要在终端输入:npm run dev 就启动webpack服务模式了;执行npm run b其实就执行的是webpack命令。
这里写图片描述
这就启动了webpack服务模式。

然后我们就可以访问http://localhost:8080/ ,就是访问我们的项目。

开始正式编写我们的代码

ES6的模块化开发

导出模块:export default {}
引入模块:import 模块名 from 地址

但ES6的这种语法,现在还有很多浏览器不认识,我们可以通过babel来转换。
另外.vue文件也要vue-loader来处理。
所以,我们还需要安装几个webpack的模块(module)

npm install vue-loader vue-html-loader css-loader style-loader file-loader   --save -dev
   
   
  • 1

最最核心的必须要下载vue:

npm install vue vue-template-compiler --save -dev
   
   
  • 1

下载babel需要的

npm install babel-cli babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime --save -dev
   
   
  • 1

如果不用ES6的语法,就不需要babel了。

1.babel配置文件,根目录新建.babelrc文件,内容如下:

{
    "presets":["es2015"]
}
   
   
  • 1
  • 2
  • 3

然后就可以编写我们的业务代码了
main.js:

//引入Vue
import Vue from 'vue';

//引入组件
import App from './App.vue';

//实例化Vue
new Vue({
    el:'body',
    components:{
        app:App
    }
});
   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

App.vue:

<template>
    <h1>welcom vue</h1>
</template>
   
   
  • 1
  • 2
  • 3
Logo

前往低代码交流专区

更多推荐