VUE：搭建脚手架——单文件组件

1. vue单文件组件写法

①什么是vue单文件组件写法

单文件组件就是一个把【html模板+javascript代码+less/sass代码】写到一个文件中

②为什么要使用vue单文件组件写法

在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素，这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图

但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：
• 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
• 字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 “\”
• 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏（css没有和组件在一起）
• 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如 Pug (formerly Jade) 和 Babel

③单文件写法示例

文件扩展名为 .vue 的 single-file components(单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具

style标签上加了一个scoped属性，表示它的 CSS 只作用于当前组件中的元素

2. 在webpack中使用vue单文件组件

概述：从头到尾使用webpack+vue实现大型商业应用开发流程如下

①安装nodejs , 搭建nodejs环境

②用node自带npm安装yarn

③创建项目目录(以英文命名)

最外层是vuewebpack文件夹，里面包含src与dist文件夹

④在根目录(my-project)下创建package.json文件

yarn init -yes

⑤用yarn全局安装webpack

yarn add webpack webpack-cli -g

⑥在项目根目录(vuewebpack)下本地安装webpack（cli也要安装）

yarn add webpack webpack-cli -D

⑦创建webpack配置文件+入口js文件+网页模板

1. webpack配置文件：只要含有基本的入口出口打包模式即可，创建在根目录(vuewebpack)下

const path = require('path');
module.exports = {
    entry: './src/index.js', //表示入口文件，即从index.js进入我们的项目
    output: { //表示输入文件相关信息
        path: path.resolve(__dirname, 'dist'), //输出到当前目录下的dist文件夹，如果不存在就会自动创建一个
        filename: 'main.js' // 表示打包后生成的最终js文件
    }
};

2. 入口js文件：引入所有模块的js文件为index.js，webpack从这里进入

创建在src目录下(vuewebpack/src)

3. 网页模板：就是一个最简单的html文件，里面有一个div，div的id为app ,然后在div的后面引入webpack配置中生成的出口js文件，一般为main.js

创建在dist目录下(vuewebpack/ dist / index.html)

⑧基本打包测试（webpack默认能打包js文件）

⑨在项目中书写vue文件：App.vue

<template>
  <div>
    {{mes}}
    <input>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      mes: "hello,我是app组件:"
    };
  },
  mounted() {
    console.info(66669);
  }
};
</script>
<style lang="less" scoped>
div {
  color: red;
}
</style>

⑩在项目中本地安装相关模块，用于识别vue文件

yarn add vue vue-loader vue-template-compiler -D	//识别template
yarn add less less-loader css-loader style-loader -D	//识别less
yarn add @babel/core @babel/preset-env babel-polyfill babel-loader -D	//安装babel语法转义【识别es6】

其中babel-polyfill用于实现转换后浏览器也不支持的新api
要转义还需要项目根目录（vuewebpack）下创建.babelrc配置文件

⑪在webpack配置文件中写相关配置

Babel

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

Less

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

Vue

①引入vue-loader中的插件

const VueLoaderPlugin = require('vue-loader/lib/plugin')

②使用此插件

plugins: [
new VueLoaderPlugin(),
]

③添加vue-loader解析器

// An highlighted block
var foo = 'bar';

webpack.config.js最终配置

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    entry: './src/index.js', //表示入口文件，即从index.js进入我们的项目
    output: { //表示输入文件相关信息
        path: path.resolve(__dirname, 'dist'), //输出到当前目录下的dist文件夹，如果不存在就会自动创建一个
        filename: 'main.js' // 表示打包后生成的最终js文件
    },
    module: {
        rules: [
            { test: /\.js$/, use: ['babel-loader'] },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
    ]
};

⑫在入口文件(index.js)引入vue根组件使用

import Vue from 'vue'
import App from './App.vue';

//使用vue组件渲染页面
new Vue({
el: "#app",
render: h => h(App) //注意：h就是createElement的缩写
})

最终效果图