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文件




    
    
    
    Document

然后运行文件

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

配置手册：https://www.npmjs.com/package/css-loader
改变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

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的起步文件和根组件说明

main.js

import Vue from 'vue';

new Vue({
    // 挂载点，element launcher
    el: '#app',
    // 渲染函数
    render(){

    }
});

new Vue的时候，要提供一个对象，对象有两个参数。

el挂载点
render渲染函数
一个Vue的组件由三部分组成：
template：放结构的，HTML在这里面写
script：放程序的，JS在这里面写
style: 放样式的，CSS在这里面写
比如：

改变main.js文件，引入这个vue文件

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

new Vue({
    // 挂载点，element launcher
    el: '#app',
    // 渲染函数
    render(h){
        return h(App);
    }
});

image.png