vue教程3-07 vue-loader

发布时间：2020-12-16 23:12:10 所属栏目：百科来源：网络整理

导读：vue-loader： vue- -> css-loader、url-loader、html- 后台: nodeJs /span-span style="color: #000000;"gt; require exportsbroserify 模块加载，只能加载jswebpack 模块加载器，一切东西都是模块,最后打包到一块了require(/span'style.css'); - css-loade

vue-loader：

vue--> css-loader、url-loader、html-

后台: nodeJs    </span>-><span style="color: #000000;"&gt;  require  exports
broserify  模块加载，只能加载js
webpack   模块加载器， 一切东西都是模块,最后打包到一块了

require(</span>'style.css');    ->   css-loader、style-<span style="color: #000000;"&gt;loader


vue</span>-<span style="color: #000000;"&gt;loader基于webpack

.css
.js
.html
.php
.....

a.vue
b.vue

.vue文件:
    放置的是vue组件代码

    </span><template><span style="color: #000000;"&gt;
        html
    </span></template>

    <style><span style="color: #000000;"&gt;
        css
    </span></style>

    <script><span style="color: #000000;"&gt;
        js    （平时代码、ES6）    ES6兼容性需要编译 用babel</span>-<span style="color: #000000;"&gt;loader
    </span></script></pre>

简单的目录结构

|-|-|-|---|-ES6: 模块化开发
导出模块：
export <span style="color: #0000ff;">default<span style="color: #000000;"> {}
引入模块:
import 模块名 from 地址

生成package.json

npm init --yes 生成

webpak准备工作：

webpak准备工作:
cnpm install webpack --save-dev
cnpm install webpack-dev-server --save-dev

//App.vue -> 变成正常代码 vue-loader@8.5.4
cnpm install vue-loader@8.5.4 --save-dev

cnpm install vue-html-loader --save-dev

cnpm install vue-html-loader css-loader vue-style-loader vue-hot-reload-api@1.3.2 --save-dev
npm install webpack webpack-dev-server vue-loader@8.5.4 vue-html-loader css-loader vue-style-loader vue-hot-reload-api@1.3.2 --save-dev
babel-loader
babel-core
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime

最最核心：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!