vue 1、构建基础

1. npm与yarn
2. webpack
3. 环境配置
4. 接口配置
5. 单页应用
6. 多页应用
7. 开发技巧
8. 实用工具

   依赖工具

• node -v 查看node版本
• npm -v 查看npm版本

  脚手架安装

• npm i -g @vue/cli // i == install
• yarn global add @vue/cli

  创建一个新项目

• vue creact my-page
• 构建一个基础项目一般需要（Babel\Router\Vuex\CSS Pre-processors）
• npm install || yarn
• vue ui //可视化界面

  启动

• cd my-page
• yarn serve || npm run serve // 看package.json

  npm与package.json

• npm 是node 的包管理工具
• npm-start 可以查看 一定时间范围内的包下载数据
• dependencies 生产环境
• devDependencies 开发环境

  npm常用命令

• npm init //生成 package.json 文件（需要手动选择配置）
• npm init -y // 生成 package.json 文件（使用默认配置）
• npm i || npm install // 安装package.json 下的依赖包
• npm i xxx 安装相应的包 (dependencies)
• npm i xxx –save (dependencies)
• npm i xxx –save-dev (devDependencies)
• npm i -g xxx 全局安装
• npm run dev || npm run start
• npm home xxx //打开包的github 主页
• npm repo xxx //打开包的github 仓库
• yarn outdated xxx //查看包版本
• yarn check //验证当前项目package.json 里的依赖版本和yarn的lock文件是否匹配
• npm publich || yarn pubilsh 发布版本到npmjs.com

  第三方插件配置

• package.json 文件中 browserslict 在不同的包之间共享目标浏览器和node版本
• “> 1%” // 表示包含所有使用率 > 1% 浏览器
• “last 2 versions” // 表示包含浏览器最新的两个版本
• “not ie <= 8” // 表示不包含 ie8 以及以下版本
• 也可以单独写在 .browserslistrc 文件中
• 官网可以搜索包含浏览器列表等待
• npx browserslist 命令查看适配的浏览器

  vue add 命令

• 是能安装Vue集成的包
• vue add router // vue-router
• vue add vuex //vuex

  webpack 的使用

• vue-cli 2.x 版本 会有相应的webpack配置文件
• vue-cli 3.x 版本 提供了 vue.config.js

  vue.config.js 的配置

• vue-cli 3.x => 如果你构建的项目中没有该文件，那么你需要在根目录手动创建。

  baseUrl

• 给项目地址增加二级目录

1
2
3
4
5
6
7
8
9

// vue.config.js
// localhost:8080/ => localhost:8080/vue/
module.exports = {
    ...
    
    baseUrl: 'vue',
    
    ...
}

• 对应webpack 文件中output的publicPath

  outputDir

• 项目打包输出地址（默认是dist文件夹）

  1 2 3 4 5 6 7 8 9

  // vue.config.js // 打包输出到output文件夹 module.exports = { ... outputDir: 'output', ... }

• 对应webpack 文件中output的path

  productionSourceMap

• 是否为生产环境构建生成 source map,用于快速定位错误信息
• 该配置会修改webpack中devtool项的值为source-map

  chainWebpack

• 集成的是webpack-chain

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

  // 用于做相应的合并处理 const merge = require('webpack-merge'); module.exports = { ... // config 参数为已经解析好的 webpack 配置 chainWebpack: config => { config.module .rule('images') .use('url-loader') .tap(options => merge(options, { limit: 5120, }) ) } ... }

• 这里需要注意的是我们使用了 webpack-merge 这一插件，该插件用于做 webpack 配置的合并处理，这样 options 下面的其他值就不会被覆盖或改变。
• 以上操作我们可以成功修改webpack中module项里rules规则为图片下的url-loader值，将limit限制改为5M，修改狗的webpack配置如下：

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

  { ... module: { rules: [ { /* config.module.rule('images') */ test: /\.(png|jpe?g|gif|webp)(\?.*)?$/, use: [ /* config.module.rule('images').use('url-loader') */ { loader: 'url-loader', options: { limit: 5120, name: 'img/[name].[hash:8].[ext]' } } ] } ] } ... }

configureWebpack

• 除了上述使用 chainWebpack 来改变 webpack 内部配置外，我们还可以使用 configureWebpack 来进行修改，两者的不同点在于 chainWebpack 是链式修改，而 configureWebpack 更倾向于整体替换和修改。示例代码如下：

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  // vue.config.js module.exports = { ... // config 参数为已经解析好的 webpack 配置 configureWebpack: config => { // config.plugins = []; // 这样会直接将 plugins 置空 // 使用 return 一个对象会通过 webpack-merge 进行合并，plugins 不会置空 return { plugins: [] } } ... }

• configureWebpack 可以直接是一个对象，也可以是一个函数，如果是对象它会直接使用 webpack-merge 对其进行合并处理，如果是函数，你可以直接使用其 config 参数来修改 webpack 中的配置，或者返回一个对象来进行 merge 处理。

• vue inspect 查看修改狗的webpack完整配置

• vue inspect plugins 值查看plugins的内容

devServer

• vue.config.js提供了devServer项用于配置webpack-dev-server的行为
• 在运行yarn server 对应的 vue-cli-service serve 其实便是基于webpack-dev-server开启一个本地服务，其常用参数如下

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

  // vue.config.js module.exports = { ... devServer: { open: true, // 是否自动打开浏览器页面 host: '0.0.0.0', // 指定使用一个 host。默认是 localhost port: 8080, // 端口地址 https: false, // 使用https提供服务 proxy: null, // string | Object 代理设置 // 提供在服务器内部的其他中间件之前执行自定义中间件的能力 before: app => { // `app` 是一个 express 实例 } } ... }

• 当然除了以上参数，其支持所有的 webpack-dev-server 中的选项，比如 historyApiFallback 用于重写路由（会在后续的多页应用配置中讲解）、progress 将运行进度输出到控制台等
• 具体可参考devServer

  默认插件介绍

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

  // vue-loader是 webpack 的加载器，允许你以单文件组件的格式编写 Vue 组件 const VueLoaderPlugin = require('vue-loader/lib/plugin'); // webpack 内置插件，用于创建在编译时可以配置的全局常量 const { DefinePlugin } = require('webpack'); // 用于强制所有模块的完整路径必需与磁盘上实际路径的确切大小写相匹配 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); // 识别某些类型的 webpack 错误并整理，以提供开发人员更好的体验。 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin'); // 将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件 const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 用于在 webpack 构建期间优化、最小化 CSS文件 const OptimizeCssnanoPlugin = require('optimize-css-assets-webpack-plugin'); // webpack 内置插件，用于根据模块的相对路径生成 hash 作为模块 id, 一般用于生产环境 const { HashedModuleIdsPlugin } = require('webpack'); // 用于根据模板或使用加载器生成 HTML 文件 const HtmlWebpackPlugin = require('html-webpack-plugin'); // 用于在使用 html-webpack-plugin 生成的 html 中添加 <link rel ='preload'> 或 <link rel ='prefetch'>，有助于异步加载 const PreloadPlugin = require('preload-webpack-plugin'); // 用于将单个文件或整个目录复制到构建目录 const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = { plugins: [ /* config.plugin('vue-loader') */ new VueLoaderPlugin(), /* config.plugin('define') */ new DefinePlugin(), /* config.plugin('case-sensitive-paths') */ new CaseSensitivePathsPlugin(), /* config.plugin('friendly-errors') */ new FriendlyErrorsWebpackPlugin(), /* config.plugin('extract-css') */ new MiniCssExtractPlugin(), /* config.plugin('optimize-css') */ new OptimizeCssnanoPlugin(), /* config.plugin('hash-module-ids') */ new HashedModuleIdsPlugin(), /* config.plugin('html') */ new HtmlWebpackPlugin(), /* config.plugin('preload') */ new PreloadPlugin(), /* config.plugin('copy') */ new CopyWebpackPlugin() ] }

• 需要注意的是要区分 webpack 内置插件和第三方插件的区别，如果是内置插件则无需安装下载，而外部插件大家可以直接访问：www.npmjs.com/ 搜索对应的插件