vue项目环境搭建（webpack4从零搭建）--仅个人记录

一、nodejs环境搭建

首先需要下载node.js(推荐直接官网找最新的版本)，下载完成后会自带npm包管理工具，打开cmd命令行界面，输入npm -v 、node -v检查node.js与npm是否安装成功。（安装成功会显示版本号）

如果下载太慢的话可以把npm换成国内淘宝镜像cnpm：（个人推荐直接使用npm，之前有使用cnpm在下载一些模块时出现版本对应不上）

npm install -g cnpm --registry=https://registry.npm.taobao.org

二、vue环境搭建

第一步：初始化项目，新建package.json

新建文件夹，然后使用命令行进入文件夹中，命令行执行 npm init 初始化，输入项目名、版本号、作者...最后OK，文件夹中会生成package.json文件

文件夹中会包含一些基本信息（项目名、版本号...）：

{
  "name": "cs",
  "version": "1.0.1",
  "description": "cs",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

到现在项目文件中仅有一个文件package.json，其中定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

第二步、加载模块，引入webpack4打包工具（webpack4需要webpack-cli）以及各种模块（模块的具体作用会专门写一张记录总结）

npm install vue vue-loader webpack webpack-cli --save-dev  
--save-dev 安装的包，会被写入到 devDependencies 对象里面去；（简写 -D）
--save 安装的包，则被写入到 dependencies 对象里面去。（简写 -S）
dependencies   ：应用能够正常运行所依赖的包。这种 dependencies 是最常见的，用户在使用 npm install 安装你的包时会自动安装这些依赖。
devDependencies：开发应用时所依赖的工具包。通常是一些开发、测试、打包工具，例如 webpack、ESLint、Mocha。
　　　　　　　　　　应用正常运行并不依赖于这些包，用户在使用 npm install 安装你的包时也不会安装这些依赖。
devDependencies 里面的插件(比如各种loader，babel全家桶及各种webpack的插件等)只用于开发环境，不用于生产环境，因此不需要打包；而 dependencies  是需要发布到生产环境的，是要打包的。

可以通过命令行执行：❶ npm install vue vue-router -S; ❷ npm install webpack webpack-cli....(加载自己所需要的模块) -D;  来进行加载模块

构建一个简单的vue项目所需要用到的最基本的模块：
npm install vue vue-router -S
npm install vue-loader webpack webpack-cli webpack-dev-server -D
npm install css-loader style-loader -D
npm install babel-core babel-loader babel-preset-env babel-preset-stage-2 babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx babel-plugin-transform-runtime babel-plugin-transform-vue-jsx -D

也可以直接将以下模块内容复制进package.json中，运行npm install加载模块：

"dependencies": {
    "vue": "^2.6.10",
    "vue-router": "^3.0.6"
  },
  "devDependencies": {
    "autoprefixer": "^9.6.0",
    "axios": "^0.19.0",
    "babel-core": "^6.26.3",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-2": "^6.24.1",
    "copy-webpack-plugin": "^5.0.3",
    "cross-env": "^5.2.0",
    "css-loader": "^3.0.0",
    "file-loader": "^4.0.0",
    "generate-asset-webpack-plugin": "^0.3.0",
    "html-webpack-plugin": "^3.2.0",
    "lockr": "^0.8.5",
    "mini-css-extract-plugin": "^0.7.0",
    "node-sass": "^4.12.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-loader": "^3.0.0",
    "rimraf": "^2.6.3",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "swiper": "^4.5.0",
    "uglifyjs-webpack-plugin": "^2.1.3",
    "url-loader": "^2.0.1",
    "vue-axios": "^2.1.4",
    "vue-lazyload": "^1.3.1",
    "vue-loader": "^15.7.0",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.10",
    "vue-wechat-title": "^2.0.5",
    "vuex": "^3.1.1",
    "vuex-persistedstate": "^2.5.4",
    "webpack": "^4.35.2",
    "webpack-cli": "^3.3.5",
    "webpack-dev-server": "^3.7.2",
    "webpack-merge": "^4.2.1"
  }

第三步、确定文件基本的目录结构（一个好的目录结构可以让自己看的更舒服，后期维护代码更容易）

这是我的个人的目录结构（还在不断的维护改善当中）：

src文件夹存放业务代码；build文件夹存放webpack的基础配置；config文件夹统一存放配置参数；

项目运行先从package.json中的 scripts执行加载配置启动项目

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.config.js",
    "clean": "rimraf dist",
    "build:pro": "cross-env NODE_ENV=production webpack --config build/webpack.prod.config.js",
    "build": "npm run clean && npm run build:pro"
  },

我这里用了热加载，区分开发环境和生产环境,执行npm run dev 会找到基础配置文件 build/webpack.dev.config.js

第四步、进行webpack的基础环境配置

开发环境配置 --build/webpack.dev.config.js   生产环境配置 --build/webpack.prod.config.js  提取公共基础配置文件 --build/webpack.base.config.js 使用 webpack-merge合并配置文件

build/webpack.base.config.js基础文件内容如下：

/*
１.配置webpack编译入口
2.配置webpack输出路径和命名规则
3.配置模块resolve规则
4.配置不同类型模块的处理规则 */

'use strict';
const path = require('path');
// node.js的文件路径，用来处理文件当中的路径问题
const baseconfig = require('../config');
//基础环境变量的配置信息
const utils = require('./utils');
//处理css的工具包
const isDev = process.env.NODE_ENV === 'development';
const vueLoaderConfig = require('./vue-loader.config');
// vue-loader.conf配置文件是用来解决各种css文件的，定义了诸如css,less,sass之类的和样式有关的loader

function resolve(dir) {
    return path.join(__dirname, '..', dir)
}
// 此函数是用来返回当前目录的平行目录的路径，因为有个'..'

const config = {
    context: path.resolve(__dirname, '../'),
    //基础目录（绝对路径），用于从配置中解析入口点和加载程序 以应用程序为根目录 普通字符串代表子目录 /代表绝对路径根目录
    entry: {
        app: './src/main.js'
    },
    // 定义入口文件
    output: {
        path: baseconfig.build.assetsRoot,//路径
        // 打包生成的出口文件所放的位置
        filename: '[name].js',
        // 打包生成app.js文件
        // publicPath: process.env.NODE_ENV === 'production' ?
        //     baseconfig.build.assetsPublicPath : baseconfig.dev.assetsPublicPath
        // 项目上线地址，也就是真正的文件引用路径，如果是production环境，其实这里都是'/'
    },
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        // 省略扩展名，比方说import index from '../js/index'会默认去找index文件，然后找index.js,index.vue,index.json文件
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src'),
        }
        // 使用别名  使用上面的resolve函数，意思就是用@代替src的绝对路径
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: vueLoaderConfig
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [resolve('src'), resolve('test')]
            },
            {
                test: /\.jsx$/,
                loader: 'babel-loader'
            },
            {
              test: /\.css$/,
              use: [
                'style-loader', //将css以js形式插入HTML中
                'css-loader', //专门处理css文件
              ]
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,// 文件大小小于10000则编译成base64格式代码
                    name: utils.assetsPath('resources/images/[name].[hash:8].[ext]') //指定输出文件的名字
                },
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,// 文件大小小于10000则编译成base64格式代码
                    name: utils.assetsPath('resources/mp4/[name].[hash:8].[ext]')  //指定输出文件的名字
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf|ico)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,// 文件大小小于10000则编译成base64格式代码
                    name: utils.assetsPath('resources/icon/[name].[hash:8].[ext]')
                }
            }
        ]
    },
    // 不同文件模块使用不同的loader
    node: {
        setImmediate: false,
        dgram: 'empty',
        fs: 'empty',
        net: 'empty',
        tls: 'empty',
        child_process: 'empty',
    }
    //这些选项可以配置是否 polyfill 或 mock 某些 Node.js 全局变量和模块。这可以使最初为 Node.js 环境编写的代码，在其他环境（如浏览器）中运行.
};
module.exports = config;

build/webpack.dev.config.js开发环境配置文件内容如下：

/*
１.引入相关插件和配置
2.生成处理各种样式的规则
3.配置开发环境，如热更新、监听端口号，是否自动打开浏览器等都在webpack中的devServer中配置完成
4.寻找可利用的端口和添加显示程序编译运行时的错误信息。*/

'use strict';
const path = require('path');
//基础环境变量的配置信息
const utils = require('./utils');
//处理css的工具包
const webpack = require('webpack');
// 引入webpack模块
const merge = require('webpack-merge');
// 将基础配置和开发环境配置或者生产环境配置合并在一起的包管理
const baseWebpackConfig = require('./webpack.base.config');
// 引入基本webpack基本配置
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 文件名及时更改，自动打包并且生成响应的文件在index.html里面
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
//当前环境的host
const HOST = process.env.HOST;// processs为node的一个全局对象获取当前程序的环境变量，即host
//当前环境的port
const PORT = process.env.PORT && Number(process.env.PORT);
const baseconfig = require('../config');

const isDev = process.env.NODE_ENV === 'development';
const defaultPlugins = [
  //webpack编译过程中以及页面上判断环境，js代码中可以引用到，用于区分环境
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: isDev ? '"development"':'"production"'
    }
  }),
  new VueLoaderPlugin(),
  //HTMLPlugin：添加HTML入口，可以设置基础参数
  new HtmlWebpackPlugin({
    template: path.join(__dirname,'../index.html')
  })
];
const devServer = {
  port: PORT || baseconfig.dev.port, //启动监听端口
  disableHostCheck: true,
  host: HOST || baseconfig.dev.host,
  // 如果编译过程中有错误，将错误显示到网页上
  overlay: baseconfig.dev.errorOverlay
    ? { warnings: false, errors: true }
    : false,// warning 和 error 都要显示
  compress: true,// 一切服务都启动用gzip方式进行压缩代码
  hot: true, // 只重新渲染页面当前组件的效果，而不会刷新这个页面，每次渲染时数据依然存在
  //将没有做映射的url路由地址，都映射到index.html中,即当使用 HTML5 History API 时，任意的 404 响应都可能需要被替代为 index.html
  historyApiFallback: {
    rewrites: [
      { from: /.*/, to: path.posix.join(baseconfig.dev.assetsPublicPath, 'index.html') },
    ],
  },
  open: baseconfig.dev.autoOpenBrowser, // 启动webpack-dev-server时，自动打开网页
  proxy: baseconfig.dev.proxyTable,//接口代理
  // 如果你有单独的后端开发服务器API，并且希望在同域名下发送API请求，那么代理某些URL将很有用.简称就是API代理,中间件  需引入 http-proxy-middleware
  quiet: false, // necessary for FriendlyErrorsPlugin
  // 启用quiet后，除了初始启动信息之外的任何内容都不会被打印到控制台。这也意味着来自的WebPack的错误或警告在控制台不可见。
};

const devWebpackConfig = merge(baseWebpackConfig,{
  // devtool:'#cheap-module-eval-source-map', //帮助页面上调试代码
  module: {
    rules: [
      {
        test: /\.scss/, //css预处理器 后缀名.scss
        use: [
          'vue-style-loader', //将css以js形式插入HTML中
          'css-loader', //专门处理css文件
          {
            loader: "postcss-loader",
            options: {
              sourceMap: true, //直接使用前面生成的sourceMap，编译的效率会快点
            }
          },
          'sass-loader' //专门处理sass文件，转为css文件，不处理css
        ]
      }
    ]
  },
  devServer:devServer,
  plugins: defaultPlugins.concat([
    //启动hot加载的功能的plugin
    new webpack.HotModuleReplacementPlugin(),// 永远不能用在生产模式，模块热更新,修改文件的内容，允许在运行时更新各种模块，而无需进行完全刷新。
    new webpack.NamedModulesPlugin(), // 当进行热更新时，相关文件名会被展示出来
    new webpack.NoEmitOnErrorsPlugin(), // 跳过编译时出错的代码并记录，使编译后运行时的包不会发生错误。
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    // 该插件可自动生成一个 html5 文件或使用模板文件将编译好的代码注入进去
    new CopyWebpackPlugin([//复制插件
      {
        from: path.resolve(__dirname, '../static'),
        to: baseconfig.dev.assetsSubDirectory,
        ignore: ['.*']//忽略.*的文件
      }
    ])
  ]),
});

module.exports = devWebpackConfig;

build/webpack.prod.config.js开发环境配置文件内容如下：

/*
1.合并基础的webpack配置
2.配置样式文件的处理规则，styleLoaders
3.配置webpack的输出
4.配置webpack插件
5.gzip模式下的webpack插件配置
6.webpack-bundle分析 */

'use strict';
const path = require('path');
// node.js的文件路径，用来处理文件当中的路径问题
const webpack = require('webpack');
// 引入webpack模块
const CopyWebpackPlugin = require('copy-webpack-plugin');
// 在webpack中拷贝文件和文件夹
const merge = require('webpack-merge');
// 将基础配置和开发环境配置或者生产环境配置合并在一起的包管理
const baseWebpackConfig = require('./webpack.base.config');
// 引入基本webpack基本配置
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 文件名即使更改，自动打包并且生成响应的文件在index.html里面
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');// 压缩css代码
const miniCssExtractPlugin=require("mini-css-extract-plugin"); // css单独提取打包
//一个用来压缩优化CSS大小的东西
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
// 一个用来压缩优化JS大小的东西
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const env = require('../config/prod.env');
const utils = require('./utils');
const baseconfig = require('../config');//导入基础配置
const serverConfig = require('../serverConfig.json');//导入，可修改的公共域名

const defaultPlugins = [
  //webpack编译过程中以及页面上判断环境，js代码中可以引用到，用于区分环境
  new webpack.DefinePlugin({
    'process.env': env
  }),
  new VueLoaderPlugin(),
  //HTMLPlugin：添加HTML入口，可以设置基础参数
  new HtmlWebpackPlugin({
    template: path.join(__dirname,'../index.html'),
    inject: true,
    minify: {//压缩
      removeComments: true,//删除注释
      collapseWhitespace: true,//删除空格
      removeAttributeQuotes: true//删除属性的引号
    },

    chunksSortMode: 'dependency'//模块排序，按照我们需要的顺序排序
  })
];

//让打包的时候输出可配置的文件
const GenerateAssetPlugin = require('generate-asset-webpack-plugin');
const createServerConfig = function(compilation){
  return JSON.stringify(serverConfig);
}

// 引入生产环境
const webpackConfig = merge(baseWebpackConfig,{
  // 这一部分会单独打包成类库文件，方便浏览器缓存 会生成一个vendor.js代码,包含类库代码
  entry: {
    app: path.join(__dirname, "../src/main.js"),
  },
  output: {
    filename: utils.assetsPath('js/[name].[chunkHash:8].js'),
    path: baseconfig.build.assetsRoot,
    chunkFilename: utils.assetsPath('js/[id].[chunkHash].js')
  },
  module: {
    rules: [
      {
        test: /\.scss/, //css预处理器 后缀名.scss
        use: [
          {
            loader:miniCssExtractPlugin.loader,
            options:{
              publicPath: '../'
            }
          },
          'css-loader', //专门处理css文件
          {
            loader: "postcss-loader",
            options: {
              sourceMap: true, //直接使用前面生成的sourceMap，编译的效率会快点
            }
          },
          'sass-loader' //专门处理sass文件，转为css文件，不处理css
        ]
      }
    ]
  },
  optimization: {
    minimizer: [
      new OptimizeCSSAssetsPlugin({}),
    ],
    splitChunks: {
      chunks: 'all'
    },
    runtimeChunk: true // webpack相关代码打包到一个文件中，好处：可以规避新的模块加入的时候，webpack给新的模块加id后，插入的顺序可能在中间，使后面模块id变化，会导致打包出的hash产生变化，这样hash就不能进行常缓存
  },
  plugins: defaultPlugins.concat([
    new miniCssExtractPlugin({filename: 'css/main.[contentHash:8].css'}),
    //让打包的时候输入可配置的文件
    new GenerateAssetPlugin({
      filename: 'serverconfig.json',
      fn: (compilation, cb) => {
        cb(null, createServerConfig(compilation));
      },
      extraFiles: []
    }),
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: path.join(__dirname, '../dist'),
        ignore: ['.*']
      },
    ]),
  ])
});
module.exports = webpackConfig;

build文件夹下utils.js文件是用来处理css的文件：

/*utils是工具的意思，是一个用来处理css的文件*/
'use strict';
const path = require('path');
const baseconfig = require('../config');

//导出文件的位置，根据环境判断开发环境和生产环境，为config文件中index.js文件中定义的build.assetsSubDirectory或dev.assetsSubDirectory
exports.assetsPath = function (_path) {
  const assetsSubDirectory = process.env.NODE_ENV === 'production'
    ? baseconfig.build.assetsSubDirectory
    : baseconfig.dev.assetsSubDirectory
//Node.js path 模块提供了一些用于处理文件路径的小工具①
  return path.posix.join(assetsSubDirectory, _path)
}

我这里将所有的参数统一放入config文件夹下的index.js文件中，使用的时候直接引用文件获取参数：

'use strict';//严格模式
const path = require('path');

module.exports = {
  dev:{
    // 开发环境下面的配置
    assetsSubDirectory: './static',//子目录，一般存放css,js,image等文件
    assetsPublicPath: './',//根目录
    proxyTable: {},//可利用该属性解决跨域的问题
    host: 'localhost', // 地址
    port: 8080, //端口号设置，端口号占用出现问题可在此处修改
    autoOpenBrowser: false,//是否在编译（输入命令行npm run dev）后打开http://localhost:8080/页面，以前配置为true，近些版本改为false，个人偏向习惯自动打开页面
    errorOverlay: true,//浏览器错误提示
    notifyOnErrors: true,//跨平台错误提示
    poll: false, //使用文件系统(file system)获取文件改动的通知devServer.watchOptions
    devtool: 'cheap-module-eval-source-map',//增加调试，该属性为原始源代码（仅限行）不可在生产环境中使用
    cacheBusting: true,//使缓存失效
    cssSourceMap: true//代码压缩后进行调bug定位将非常困难，于是引入sourcemap记录压缩前后的位置信息记录，当产生错误时直接定位到未压缩前的位置，将大大的方便我们调试
  },
  build: {
    // 生产环境下面的配置
    index: path.resolve(__dirname, '../dist/index.html'),//index编译后生成的位置和名字，根据需要改变后缀，比如index.php
    assetsRoot: path.resolve(__dirname, '../dist'),//编译后存放生成环境代码的位置
    assetsSubDirectory: './static',//js,css,images存放文件夹名
    assetsPublicPath: './',//发布的根目录，通常本地打包dist后打开文件会报错，此处修改为./。如果是上线的文件，可根据文件存放位置进行更改路径
    productionSourceMap: true,
    devtool: '#source-map',//①
    //unit的gzip命令用来压缩文件，gzip模式下需要压缩的文件的扩展名有js和css
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

配置babel，项目目录下新建.babelrc文件

主要是对预设（presets）和插件（plugins）进行配置，因此不同的转译器作用不同的配置项

1、创建预设（presets）:主要通过npm安装babel-preset-xx插件来配合使用，例如通过 npm install babel-preset-stage-2 babel-preset-env --D 安装，会有相应如下配置。

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
}

2、插件（plugins）：官方推荐使用babel-preset-env来替代一些插件包的安装

这里主要介绍两款常用插件，分别是babel-plugin-transform-runtime，babel-plugin-syntax-dynamic-import(如果.babelrc配置项中使用了"stage-2"，也可以不使用该插件，同样支持动态模块引入)。

{
　　"plugins": ["transform-vue-jsx", "transform-runtime"，"syntax-dynamic-import"]
}

完整的.babelrc文件内容：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"]
}

postcss.config.js文件的作用主要是为了配置css在不同浏览器上的添加前缀，内容如下：

const autoprefixer = require('autoprefixer');
module.exports = {
    plugins: [
      require('autoprefixer')({
        "overrideBrowserslist": [
          "defaults",
          "not ie < 11",
          "last 2 versions",
          "> 1%",
          "iOS 7",
          "last 3 iOS versions"
        ]
      })
    ]
}

第五步、编写入口文件与APP.vue

在src下新建main.js与app.vue文件

main.js内容如下：

import Vue from 'vue'
import 'babel-polyfill'
import App from './app.vue'
import VueRouter from 'vue-router'
import store from './store/index.js'
import axios from 'axios'
import Lockr from 'lockr'
import VueAxios from 'vue-axios'
import './assets/css/common.scss'
import './assets/iconfont/iconfont.css'
import VueLazyload from 'vue-lazyload' //图片懒加载
import VueWechatTitle from 'vue-wechat-title'

Vue.use(VueWechatTitle);
Vue.use(VueLazyload, {
  preLoad: 1,    //预加载高度的比例
  error: '',  //图像的src加载失败
  loading: '', //src的图像加载
  attempt: 1,  //尝试计数
  listenEvents: [ 'scroll', 'mousewheel' ] //你想要监听的事件,我个人喜欢全部监听，方便
});
Vue.use(VueAxios,axios);
Vue.use(VueRouter);
Vue.use(Lockr);

import createRouter from './router/index'
import './assets/js/touch_screen'
const router = createRouter();

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
  if (to.meta.requireAuth) {
    next();
  } else {
    next();
  }
});
Vue.prototype.getConfigJson = function () {
  axios.get('serverConfig.json').then((result)=>{
    Vue.prototype.ApiUrl =result.data.ApiUrl;//设置成Vue的全局属性 ApiUrl:域名接口
    new Vue({
      router,
      store,
      render: (h) => h(App)
    }).$mount('#root');
  }).catch((error)=>{
    console.log(error)
  })
}
Vue.prototype.getConfigJson();//调用声明的全局方法

APP.vue

<template>
    <div id="app">

    </div>
</template>

<script>
    import Lockr from 'lockr'
    export default {
       name: 'App',
       data(){
         return{
           msg:"",
           currentDate:'',
         }
       },
       created() {
         this.currentDate = (new Date()).getHours();
         console.log(this.currentDate)
         //在页面刷新时将vuex里的信息保存到localStorage里(代码中实现刷新)
         window.addEventListener("beforeunload",()=>{
           Lockr.set("messageStore",JSON.stringify(this.$store.state));
         });
         //在页面加载时读取localStorage里的状态信息
         Lockr.get("messageStore") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(Lockr.get("messageStore"))));
         Lockr.rm('messageStore');
       },
    }
</script>

<style lang="scss" scoped></style>

到这里项目就结束了，运行npm run dev运行，浏览器输入loaclhost:8080

这是我写的第一篇文章，写的不怎么好，只是用作记录自己的所学，有什么好的建议，可以留言