之后运行npm run dev，就可以看到效果了，可以在控制台的Element中看到，小于8K的图片被直接转成了base64，而大于8K的文件被当作了外部资源进行引用了。
<!-- ... --> <img data-v-7ba5bd90="" src="http://www.likecs.com/data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASA..." alt=""> <img data-v-7ba5bd90="" src="http://localhost:3000/static/vue-large.b022422b.png" alt=""> <!-- ... --> 处理Babel使用babel主要是为了做浏览器的兼容，@babel/core是babel核心包，@babel/preset-env是集成bebal一些可选方案，可以通过修改特定的参数来使用不同预设，babel-loader可以使得ES6+转ES5，babel默认只转换语法而不转换新的API，core-js可以让不支持ES6+ API的浏览器支持新API，当然也可以用babel-polyfill，相关区别可以查阅一下，建议用core-js，处理完成babel的commit id为5e0f5ad。
$ yarn add -D @babel/core @babel/preset-env babel-loader $ yarn add core-js@3之后在根目录新建一个babel.config.js，然后将以下代码写入。
// babel.config.js module.exports = { "presets": [ [ "@babel/preset-env", { "useBuiltIns": "usage", "corejs": 3, "modules": false } ] ] }之后修改一下App.vue，写一个较新的语法?.。
<!-- App.vue --> <template> <div> <img src="http://www.likecs.com/static/vue.jpg" alt=""> <img src="http://www.likecs.com/static/vue-large.png" alt=""> <div>{{ msg }}</div> <button @click="toast">按钮</button> </div> </template> <script> export default { name: "App", data: () => ({ msg: "Example" }), methods: { toast: function(){ window?.alert("ExampleMessage"); } } } </script> <style scoped> .vue{ width: 100px; } .vue-large{ width: 300px; } .example{ font-size: 30px; } </style>还需要修改一下webpack.config.js。
// webpack.config.js // ... module.exports = { // ... module: { rules: [ // ... { test: /\.js$/, exclude: /node_modules/, use: ["babel-loader"] }, ], }, // ... }之后运行npm run dev就可以看到运行起来并且功能正常了，并且这个?.的语法在此处实际上是进行了一次转码，可以在控制台的Source里搜索ExampleMessage这个字符串就可以定位到相关位置了，然后就可以看到转码的结果了。
window?.alert("ExampleMessage"); // -> window === void 0 ? void 0 : window.alert("ExampleMessage"); 处理Css通常我们一般不只写原生css，我一般使用sass这个css框架，所以此处需要安装sass以及sass-loader，sass-loader请使用低于@11.0.0的版本，sass-loader@11.0.0不支持vue@2.6.14，此外我们通常还需要处理CSS不同浏览器兼容性，所以此处需要安装postcss-loader，当然postcss.config.js也是可以通过postcss.config.js文件配置一些信息的，比如@/别名等，另外需要注意，在use中使用loader的解析顺序是由下而上的，例如下边的对于scss文件的解析，是先使用sass-loader再使用postcss-loader，依次类推，处理完成sass和postcss的commit id为f679718。
yarn add -D sass sass-loader@10.1.1 postcss postcss-loader之后简单写一个示例，新建文件/src/common/styles.scss，然后其中写一个变量$color-blue: #4C98F7;。
$color-blue: #4C98F7;之后修改App.vue和webpack.config.js，然后运行npm run dev就可以看到Example这个文字变成了蓝色。
<!-- App.vue --> <template> <div> <img src="http://www.likecs.com/static/vue.jpg" alt=""> <img src="http://www.likecs.com/static/vue-large.png" alt=""> <div>{{ msg }}</div> <button @click="toast">按钮</button> </div> </template> <script> export default { name: "App", data: () => ({ msg: "Example" }), methods: { toast: function(){ window?.alert("ExampleMessage"); } } } </script> <style scoped lang="scss"> @import "./common/styles.scss"; .vue{ width: 100px; } .vue-large{ width: 300px; } .example{ color: $color-blue; font-size: 30px; } </style> // webpack.config.js // ... module.exports = { // ... module: { rules: [ // ... { test: /\.css$/, use: [ "vue-style-loader", "css-loader", "postcss-loader" ], }, { test: /\.(scss)$/, use: [ "vue-style-loader", "css-loader", "postcss-loader", "sass-loader", ] }, // ... ], }, // ... } 加入VueRouter使用Vue大概率是需要Vue全家桶的VueRouter的，此处直接安装vue-router。
$ yarn add vue-router在这里改动比较多，主要是建立了src/router/index.js文件，之后建立了src/components/tab-a.vue与src/components/tab-b.vue两个组件，以及承载这两个组件的src/views/framework.vue组件，之后将App.vue组件仅作为一个承载的容器，以及src/main.js引用了VueRouter，主要是一些VueRoute的一些相关的用法，改动较多，建议直接运行版本库，相关commit id为96acb3a。
<!-- src/components/tab-a.vue --> <template> <div>Example A</div> </template> <script> export default { name: "TabA" } </script> <!-- src/components/tab-b.vue --> <template> <div>Example B</div> </template> <script> export default { name: "TabB" } </script> <!-- src/views/framework.vue --> <template> <div> <img src="" alt=""> <img src="" alt=""> <div>{{ msg }}</div> <button @click="toast">按钮</button> <div> <router-link to="/tab-a">TabA</router-link> <router-link to="/tab-b">TabB</router-link> <router-view /> </div> </div> </template> <script> export default { name: "FrameWork", data: () => ({ msg: "Example" }), methods: { toast: function(){ window?.alert("ExampleMessage"); } } } </script> <style scoped lang="scss"> @import "../common/styles.scss"; .vue{ width: 100px; } .vue-large{ width: 300px; } .example{ color: $color-blue; font-size: 30px; } </style> <!-- src/App.vue --> <template> <div> <router-view /> </div> </template> // src/router/index.js import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(VueRouter); import FrameWork from "../views/framework.vue"; import TabA from "../components/tab-a.vue"; import TabB from "../components/tab-b.vue"; const routes = [{ path: "http://www.likecs.com/", component: FrameWork, children: [ { path: "tab-a", name: "TabA", component: TabA, },{ path: "tab-b", name: "TabB", component: TabB, } ] }] export default new VueRouter({ routes }) // src/main.js import Vue from "vue"; import App from "./App.vue"; import Router from "./router/index"; const app = new Vue({ router: Router, ...App, }); app.$mount("#app"); 加入Vuex同样使用Vue也是需要Vue全家桶的Vuex的，此处直接安装vuex。
yarn add vuex