vue教程3-07 vue-loader

vue-loader：

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

<a href="https://www.jb51.cc/tag/houtai/" target="_blank" class="keywords">后台</a>: nodeJs    </span>-><span style="color: #000000;"&gt;  require  exports
broserify  模块加载，只能加载js
webpack   模块加载器， 一切东西都是模块,最后打包到一块了

require(</span>'style.css');    ->   <a href="https://www.jb51.cc/tag/css/" target="_blank" class="keywords">css-</a>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<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>:
    放置的是vue组件<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>

    </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    （平时<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>、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

最最核心：

原文链接：https://www.f2er.com/vue/403294.html

vue教程3-07 vue-loader

猜你在找的Vue相关文章