Vue-Router路由Vue-CLI脚手架和模块化开发之单文件组件

单文件组件介绍

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

vue文件结构

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

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

通过管理员窗口使用指令生成package.json 项目配置文件

导入依赖

由于在开发的过程中需要使用.vue文件

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

生产环境

vue：npm install vue -S vue核心库

开发环境

webpack

npm i webpack -D webpack库
npm i webpack-cli -D webpack 4.x版本以后需要依赖这个库
npm i webpack-dev-server -D webpack服务器

Loader

npm i vue-html-loader -D html加载器
npm i css-loader -D css加载器
npm i vue-style-loader -D style加载器
npm i vue-loader -D vue加载器

template

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

babel

npm i @babel/core -D babel核心库如果babel-loader 为8.x 那么需要使用@babel/core安装7.x的core
npm i babel-loader -D babel编译js
npm i babel-preset-env -D babel插件自动检测 (需要根据配置的运行环境)

安装完package.json的最终效果：

附：需要按照顺序一个一个进行安装，预防后面的依赖前面的包

配置单文件项目并运行

main.js

import Vue from 'vue'//引入内置模块

import App from './app.vue'//引入自定义模块

new Vue({
    
    el:'#app',
    //使用render渲染
    
    render:function(r){
        
        return r(App);
    }
    
    
})

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            
            
            
        </div>
    </body>
    
    
</html>

app.vue

<template>
    
    <h2> 欢迎来到perfect*的博客园！！！</h2>
</template>

<script>
</script>

<style>
</style>

webpack.config.js

const VueLoaderPlugin=require('vue-loader/lib/plugin');
module.exports={
    //1配置入口文件
    entry:'./main.js',
    
    
    
    
    //2配置出口
    output:{
        
        
        path:__dirname,
        filename:'build.js'
    },
    
    
    
    //3配置loader
    
    module:{
rules:[

{
    //.vue
    test:/.vue$/,
    loader:'vue-loader'

    
},

{
    //js
    test:/.js$/,
    loader:'babel-loader',
    exclude:'/node_modules/'//排除该目录

    
},
{
//css
    test:/.css$/,
    use:[
    'vue-style-loader',
    'css-loader'
    
    ]

    
}



]
},


//4配置插件

plugins:[
  new VueLoaderPlugin()


],

//5设置模式

mode:'development'//开发模式
    
    
    
    
    
}

之后在index.html中的加入：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            
            
            
        </div>
    </body>
    
    <script src="build.js"></script><!--放在head标签之间找不到项目的挂载点-->
</html>

自定义文件.babelrc

{
        "presets":[
        [
            "env",
            {
                "moudle":false
                }
        ]
    ]
}

package.json中加入：

{
  "name": "simple-file",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dev":"webpack-dev-server --open --hot --port8088 --config webpack.config.js --mode development"
  },

在管理员窗口输入npm run dev 进行运行该项目：

最终效果：

可以在app.vue中添加js代码，在控制台打印出内容，以及修改其样式

app..vue

<template>
    
    <h2> 欢迎来到perfect*的博客园！！！</h2>
</template>

<script>
    console.log('欢迎来到perfect*的博客园')
</script>

<style>
    
    h2{
        
        color: red;
    }
</style>