Vue中的单文件组件

一，单文件组件 

单文件组件介绍：

• vue中的单文件组件是以.vue扩展名结尾的文件，在这个文件中封装了html、js、css的代码，它自身是一个独立                                的组件，所以成为单文件组件；

vue文件结构：

• 由于.vue封装了html、js、css的代码，所以它由以下几部分组成；

<template> html </template>

<script> js </script>

<style> css </style>

vue-loader：

• 如果使用.vue文件，需要使用指定加载器，否则浏览器是不能解析的。加载.vue文件的加载器是 vue-loader；
• 同理，一个项目中还需要html、css等，所以也要用到其对应的加载器 例：html-loader、css-loader…
• vue-loader是基于webpack的，要在webpack中进行配置，所以还要配置webpack；

webpack：

• javaScript应用的静态模块打包器；把前端各种资源作为模块处理、使用、打包；
• 官网： 点击前往

二，创建项目结构

基于webpack的单文件组件项目基本结构

1. index.html   基本页面
2. App.vue   vue根组件
3. main.js   入口文件
4. package.json  项目配置文件
5. webpack.config.js   webpack配置文件
6. .babelrc  babel配置文件，babel可以将es6转成es5

三，导入依赖

基于webpack的单文件组件项目需要安装以下依赖

生产环境

        vue：cnpm install vue -S  vue核心库

开发环境

        webpack

                 cnpm i webpack -D  webpack库

                 cnpm i webpack-cli -D  webpack 4.x版本以后需要依赖这个库

                 cnpm i webpack-dev-server -D   webpack服务器

         Loader

                 cnpm i vue-html-loader -D  html加载器

                 cnpm i css-loader -D  css加载器

                 cnpm i vue-style-loader -D  style加载器

                 cnpm i vue-loader -D  vue加载器

        template

                 cnpm i vue-template-compiler -D  预编译模版

         babel

                 cnpm i @babel/core -D  babel核心库 如果babel-loader 为8.x 那么需要使用@babel/core安装7.x的core

                 cnpm i babel-loader -D  babel编译js

                 cnpm i babel-preset-env -D  babel插件自动检测 (需要根据配置的运行环境)

 

未完待续