vue-loader和单页组件介绍

概述一、Vue Loader介绍 　　Vue Loader 是一个 webpack 的loader，它允许你以一种名为 单文件组件（SFCs）的格式撰写 Vue 组件。官方文档地址如下所示： 　　Vue Loader v15及以上版本官方文档地址 　　Vue Loader v14 或更早的版本官方文档地址       二、项目示例 1、项目准备和组件安装 　　将 webpack-dev-server 一、Vue Loader介绍

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

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

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

 

 

 

二、项目示例 1、项目准备和组件安装

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

$ npm install [email protected]14.1.1 -D

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

$ npm install [email protected]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。

总结

以上是内存溢出为你收集整理的vue-loader和单页组件介绍全部内容，希望文章能够帮你解决vue-loader和单页组件介绍所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。