vue学习

1、下载安装node.js
    点击该网址https://nodejs.org/en/download/  ，选择合适的版本，我用的最新版node-v12.16.0-x64.msi,点击下一步下一步安装即可，也可选择安装到自己其它的硬盘，默认c盘。
    
2、查看node.js版本
   在命令行输入node -v 回车，将回显nodeJs已安装的版本号(v12.16.0)。
   
3、查看npm版本
   新版nodeJs集成了npm，在命令行输入npm -v，将回显npm安装的版本号(6.13.4).
   
4、webpack构建vue项目
   新建一个项目目录，cd /d 定位进去，然后输入npm init。会提示你填写一些项目的信息，一直回车默认就好了，或者直接执行npm init -y 直接跳过，这样就在项目目录下生成了一个package.json文件。
   生成package.json.
   
5、安装webpack，高版本webpack需要安装webpack-cli。
   npm install webpack webpack-cli --save--dev.
   
6、安装lodash组件，在index.js里面import组件。
   npm install --save lodash
   
7、新建dist文件夹，创建index.html，创建分发发布版。

8、执行npx webpack，会在dist文件夹下生成main.js（js压缩优化输出），index.html引用main.js。

9、js导入css
   执行npm install --save-dev style-loader css-loader命令，安装style-loader、css-loader组件
   在index.js中 import "./style.css"; js与css在同一目录要加./
   
10、导入图片
   执行npm install --save-dev file-loader
   在index.js中 
   import _ from 'lodash';
   import './style.css';
   import Icon from './qr-code.png';

function component() {
    const element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack', 'and the world'], ' ');
    element.classList.add('hello');

    //Add the image to our existing div.
    const myIcom = new Image();
    myIcom.src = Icon;
    element.appendChild(myIcom);
    return element;
}
document.body.appendChild(component());

在css导入image
.hello{
    font-size: 30px;
    color: red;
    background: url('./qr-code.png');
}

11、安装html-webppack-plugin插件，实现将webpack.config.js 中的entry js集合动态输出到index.html中
    执行命令npm install --save-dev html-webpack-plugin
    
12、在webpack.config.js设置mode及devtool可用于堆栈追踪
    mode: 'development',
    devtool: 'inline-source-map',

13、安装实时刷新页面更新组件 npm install --save-dev webpack-dev-server
    webpack.config.js添加如下配置
    devServer:{
        contentBase: './dist',
    }

14、安装webpack-dev-middleware与express服务器
    执行命令 npm install --save-dev express webpack-dev-middleware
    修改webpack.config.js配置，如下
 output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
+     publicPath: '/',
    },