Vue全家桶

1.技术路线

2.包管理工具-NPM

  2.1 使用npm安装webpack

    note:设置npm的安装目录和缓存目录，否则默认是在路径C:UsersMSLAppDataRoaming pm下进行安装，进行配置

    使用淘宝NPM镜像-npm install -g cnpm --registry=https://registry.npm.taobao.org

　cnpm install webpack -g

   或者直接使用npm 进行安装:npm install webpack -g

   完成后配置环境变量

    note: 设置环境变量后退出cmd，重新打开生效。

https://blog.csdn.net/daponi/article/details/102949986

3.静态模块打包器-webpack

　3.1 webpack

　　　配置文件--webpack.config.js,默认配置文件内容

module.exports={
    mode:'development',
}

　　 (1)入口(entry)

　　　　打包的js对象文件路径

　　 (2)输出(output)

　　　　输出配置:js文件名称和路径

　　 (3)loader

　　处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，可以利用 webpack 的打包能力，对它们进行处理。　　　　　　　　　　

       loader 能够 import 导入任何类型的模块（例如 .css 文件），这是 webpack 特有的功能，其他打包程序或任务执行器的可能并不支持。

　　

const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

　　在webpack的配置中loader有两个目标:

• test属性，用于标识出应该被对应的loader进行转换的某个或某些文件。
• use属性，表示进行转换时，应该用哪个loader

 　　(4)插件(plugins)

　　  require()-引入一个插件使用，然后添加到plugins数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
const config = {
  module: {
    rules: [
      { test: /.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

　　　(5)模式

 　　通过选择 development 或 production 之中的一个，来设置 mode 参数，可以启用相应模式下的 webpack 内置的优化

module.exports = {
  mode: 'production'
};

　3.2 webpack-dev-server

4.vue-cli

      4.1 vue-cli安装

　　  卸载：npm -uninstall vue-cli -g

　　  --windows下升级node.js

　　　　　直接下载最新版本安装包，在原有安装目录下覆盖，并不会影响webpack等安装的cmd,只会删除node相关的文件及文件夹，其他的都会保留。

　　(1)cli服务

　　　　　package.json文件中“@vue/cli-service”安装了一个名为 vue-cli-service 的命令,以vue create创建的项目文件为根目录，命令路径为./node_modules/.bin/vue-cli-service。

　　　　　使用默认preset项目的package.json:　　　

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
}

　　可以通过npm或yarn或npx调用script: npm  run serve / yarn serve /npx vue-cli-service serve

　　 vue-cli-service serve指令

　　　　

　　(2)cli插件

               preset配置文件

　　　　Preset 的数据会被插件生成器用来生成相应的项目文件。也可以为集成工具添加配置，

{
  "useConfigFiles": true,
  "plugins": {...},
  "configs": {
    "vue": {...},
    "postcss": {...},
    "eslintConfig": {...},
    "jest": {...}
  }
}

　　　　这些额外的配置将会根据 useConfigFiles 的值被合并到 package.json 或相应的配置文件中。例如，当 "useConfigFiles": true 的时候，configs 的值将会被合并到 vue.config.js 中。