vue-loader和单页组件介绍

一、Vue Loader介绍

　　Vue Loader 是一个 webpack 的loader，它允许你以一种名为 单文件组件（SFCs）的格式撰写 Vue 组件。官方文档地址如下所示：

　　Vue Loader v15及以上版本官方文档地址

　　Vue Loader v14 或更早的版本官方文档地址

 

 

 

二、项目示例

1、项目准备和组件安装

　　将 webpack-dev-server 项目复制为 single-file，安装 vue-loader 组件：

$ npm install vue-loader@14.1.1 -D

　　安装vue的模板解析器: vue-template-compiler，注意要安装对应的版本号，才能适配。

$ npm install vue-template-compiler@2.5.17 -D

 

2、在webpack中配置vue-loader

　　这里是在webpack.dev.config.js中配置vue-loader：

// node.js中内容模块 var path = require('path'); module.exports = { // entry入口 entry: { main: './src/main.js' }, // output出口 output: { path:path.resolve('./dist'), // 相对转绝对 filename: './bundle.js' }, watch:true, // 模块中的loader module:{ loaders:[ { test:/\.css$/, // css结尾的 loader:'style-loader!css-loader' // 依次识别 }, { test:/\.vue$/, loader:'vue-loader' } ] } }

2、Vue组件规格

　　*.vue 文件是用户用 HTML-like 的语法编写的 Vue 组件。每个 *.vue 文件都包括三部分：组件结构（template—>html）、业务逻辑（script—>js）、组件样式（style—>css）。

　　将App.js改写为App.vue。

 

posted @ 2019-05-21 18:11 休耕 阅读( ...) 评论( ...) 编辑 收藏