vue全家桶

一、NodeJS改变了前端开发 - 利用webpack实现模块化开发

NodeJS诞生于2009年，作者是Ryan Dahl，目的是为JS赋能。
NodeJS改变了前端开发的模式，为什么？？
NodeJS有很多工具，比如less翻译、webpack打包工具等等。

webpack

二、安装开发工具

npm install -g webpack
npm install -g webpack-cli

创建circle.js文件

export const mianji = r => 3.14 * r * r;
export const zhouchang = r => 2 * 3.14 * r;

main.js

import {mianji, zhouchang} from './circle.js';
var result = mainji(10);
document.getElementById('app').innerHTML = 
    '很好，圆的面积是' + result;

这种编程模式，叫做模块化开发。
但是，浏览器如果直接用script标签引入模块化开发的js文件，不认识import、不认识export、不认识{}等等。
解决方法：是用webpack进行打包，打出来的js文件就不含有import、export了，就变为浏览器兼容的js文件了。

文件配置

const path = require('path');

module.exports = {
    // 打包模式，development不加密，打包快；
    // production生产模式，在服务器上部署了，加密、打包慢
    mode: 'development',
    // 入口，从哪个文件开始打包
    entry: './app/main.js',
    // 出口，打包到什么地方
    output: {
        // 文件名
        filename: 'bundle.js',
        // 路径
        path: path.resolve(__dirname, 'dist')
    }
}

三、技术栈升级

webpack-dev-server

npm install -g webpack-dev-server

改变webpack.config.js

module.exports = {
    // 打包模式，development不加密，打包快；
    // production生产模式，在服务器上部署了，加密、打包慢
    mode: 'development',
    // 入口，从哪个文件开始打包
    entry: './app/main.js',
    // 出口，打包到什么地方
    output: {
        // 文件名
        filename: 'bundle.js',
        // 虚拟路径
        publicPath: 'xuni'
    }
}

创建身份证文件

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "dev": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC"
}

改变index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    
    <script src="xuni/bundle.js"></script>
</body>
</html>

然后运行文件

npm run dev

127.0.0.1:8080

四、技术栈升级 - CSS-loader

css-loader

webpack天生只认识js文件和json文件。
比如，我们尝试书写
import './css.css'
会引发报错：

没有编译css文件

为了让webpack能够认识css文件，必须安装css-lader。

npm install --save css-loader
npm install --save style-loader

配置手册：<u>https://www.npmjs.com/package/css-loader</u>
改变webpack.config.js

module.exports = {
    // 打包模式，development不加密，打包快；
    // production生产模式，在服务器上部署了，加密、打包慢
    mode: 'development',
    // 入口，从哪个文件开始打包
    entry: './app/main.js',
    // 出口，打包到什么地方
    output: {
        // 文件名
        filename: 'bundle.js',
        // 虚拟路径
        publicPath: 'xuni'
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            }
        ]
    }
}

四、技术栈升级 - Vue-loader

vue-loader

安装依赖

npm install --save vue-loader
npm install --save vue-template-compiler

vue-template-compiler表示vue的模板编译器，与webpack共同工作的时候。
再次改变webpack.config.js

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

module.exports = {
    // 打包模式，development不加密，打包快；
    // production生产模式，在服务器上部署了，加密、打包慢
    mode: 'development',
    // 入口，从哪个文件开始打包
    entry: './app/main.js',
    // 出口，打包到什么地方
    output: {
        // 文件名
        filename: 'bundle.js',
        // 虚拟路径
        publicPath: 'xuni'
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins: [
        // 请确保引入这个插件！
        new VueLoaderPlugin()
    ]
}

六、Vue的Hello World

安装依赖

npm install --save vue

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

module.exports = {
    // 打包模式，development不加密，打包快；
    // production生产模式，在服务器上部署了，加密、打包慢
    mode: 'development',
    // 入口，从哪个文件开始打包
    entry: './app/main.js',
    // 出口，打包到什么地方
    output: {
        // 文件名
        filename: 'bundle.js',
        // 虚拟路径
        publicPath: 'xuni'
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins: [
        // 请确保引入这个插件！
        new VueLoaderPlugin()
    ],
    resolve: {
        alias: {
          'vue$': 'vue/dist/vue.esm.js'
        }
    }
}

由于loader装了3个，webpack有一个问题，就是必须在项目中重新安装webpack。

npm install --save webpack

<template>
    <div>
        <h1>你好，我是Vue</h1>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                r: 100,
                g: 200,
                b: 123
            }
        }
    }
</script>

<style scoped>
    h1{
        color:red;
    }
    .box{
        width:200px;
        height:200px;
        border:1px solid red;
    }
</style>

vue起步成功

总结：安装的依赖

npm install --save css-loader
npm install --save style-loader
npm install --save vue-loader
npm install --save vue-template-compiler
npm install --save vue
npm install --save webpack

文件结构

七、Vue的起步文件和根组件说明