3.4 Vue的使用

3.4 Vue的使用

问题一：如何接入 Vue 框架？

目前最成熟和流行的开发 Vue 项目的方式是采用 ES6 加 Babel 转换Vue 官方提供了对应的vue-loader可以非常方便的完成单文件组件的转换。

修改 Webpack 相关配置如下：

module:{rules:[{test:/\.vue$/,use:['vue-loader'],},]}

安装新引入的依赖：

# Vue 框架运行需要的库npm i-S vue# 构建所需的依赖npm i-D vue-loader css-loader vue-template-compiler

问题二：所装依赖的作用？

vue-loader：解析和转换.vue文件，提取出其中的逻辑代码script、样式代码style、以及 HTML 模版template，再分别把它们交给对应的 Loader 去处理。

css-loader：加载由vue-loader提取出的 CSS 代码。

vue-template-compiler：把vue-loader提取出的 HTML 模版编译成对应的可执行的 JavaScript 代码，这和 React 中的 JSX 语法被编译成 JavaScript 代码类似。预先编译好 HTML 模版相对于在浏览器中再去编译 HTML 模版的好处在于性能更好。