前言
涉及技术：
- nodejs
- vue-cli4.x
- vue
搭建环境
1.安装 nodejs，切换到淘宝镜像
自行百度搜索安装，切换镜像
2.全局安装 vue-cli4.x，如果安装了 2.x 或 3.x 先卸载，在重新安装
查看[官网](https://cli.vuejs.org/zh/guide/installation.html) 卸载2.x：npm uninstall vue-cli -g 卸载3.x：npm uninstall @vue/cli -g 说明：-g 是全局的意思 安装4.x：npm install -g @vue/cli
3.检测vue-cli版本
命令行输入：
vue --version创建项目
命令行输入 vue ui，打开 vue-cli 管理界面，选择合适位置，点击创建项目：
输入项目名，选择合适的包管理器或默认，点击下一步：
选择默认或手动，这里选择手动，下一步：
选择需要的依赖，vuex 不太熟，我先不选，其他标红的我都选了，点击下一步：
修改配置，点击创建项目：
保存为预设，下次创建可以直接选择预设，或者不保存也可以：
创建完成后的界面：
点击任务，点击编译和热更新，点击运行：
没有错误，点击启动app，可以打开项目，项目创建成功：
添加 UI 框架
这里使用 vant 框架，详情网址点击这里，停止项目，打开依赖，右上角点击安装依赖：
搜索vant，安装运行时依赖：
安装 babel-plugin-import 开发依赖，这个可以自动将 import 语句转换为按需加载：
修改 bable.config.js 配置，添加如下内容（不知道具体什么意思，大体意思是加载 vant 库吧）：
plugins: [
[
'import',
{ libraryName: 'vant', libraryDirectory: 'es', style: true },
'vant'
]
]在页面测试是否起作用，这里使用 About.vue 页面（vue-router自动生成的），使用 vant 的按钮试一试：
点击 vue-cli 管理界面的任务中的运行，打开项目页面：
表示 UI 已经生效。
移动端适配
vant 中提供了两种方案，这里使用将 px 转成 viewport 单位的方案：
在依赖管理中添加开发依赖 postcss-px-to-viewport ：
在项目根目录创建 vue.config.js：
添加配置：
const autoprefixer = require('autoprefixer');
const pxtoviewport = require('postcss-px-to-viewport');
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
autoprefixer(),
pxtoviewport({
viewportWidth: 375
})
]
}
}
}
};
更多详细配置参考官网说明，这里给出一份官方说明的配置：
const autoprefixer = require('autoprefixer');
const pxtoviewport = require('postcss-px-to-viewport');
/** 区分打包环境与开发环境
* process.env.NODE_ENV==='production' (打包环境)
* process.env.NODE_ENV==='development' (开发环境)
*/
module.exports = {
/**
* 应用路径，应用的资源访问都会加上这个路径。
* 如tomcat容器webapps有两个应用：
* ROOT、my-app
* 访问地址为：localhost:8080/、localhost:8080/my-app/，
* 如果将应用放在my-app中，应用地址为 /my-app/
* baseUrl 从 Vue CLI 3.3 起已弃用，请使用publicPath
*/
publicPath: process.env.NODE_ENV === 'production' ? '/wxshop/' : '/',
/**
* 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除，默认dist
*/
outputDir: 'dist',
// assetsDir: '',//放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
/**
* 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
* 默认: 'index.html'
*/
indexPath: 'index.html',
/**
* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。然而，这也要求 index 的 HTML 是被 Vue CLI 自动生成的。
* 如果你无法使用 Vue CLI 生成的 index HTML，你可以通过将这个选项设为 false 来关闭文件名哈希。
* 默认：true
*/
filenameHashing: true,
/**
* 构建多页面时使用，具体查看 https://cli.vuejs.org/zh/config/#pages
* 默认：undefined
*/
pages: undefined,
/**
* js 代码错误检查，如果为true 生产和开发模式都会将错误输出为编译警告，不会使编译失败 https://cli.vuejs.org/zh/config/#lintonsave
* 默认：true
*/
lintOnSave: true,
/**
* 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，
* 但是这会让你的应用额外增加 10kb 左右。
* 默认：false
*/
runtimeCompiler: false,
/**
* 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。
* 默认：[]
*/
transpileDependencies: [],
/**
* 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。source map 可以在线上环境报错时提示具体的错误位置。
* 默认：false
*/
productionSourceMap: false,
/**
* 设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。
* 需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。
* 默认：undefined
*/
crossorigin: undefined,
/**
* 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。
* 如果你构建后的文件是部署在 CDN 上的，启用该选项可以提供额外的安全性。
* 需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响
* 另外，当启用 SRI 时，preload resource hints 会被禁用，因为 Chrome 的一个 bug 会导致文件被下载两次。
* 默认：false
*/
integrity: false,
/**
* 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
* 如果这个值是一个函数，则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
* 更多细节可查阅：配合 webpack > 简单的配置方式
* 简单的配置方式：https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
* 作用：调整 webpack 配置
*/
configureWebpack: config => {
// window.console.log(config);
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
} else {
// 为开发环境修改配置...
}
// config.resolve.alias
// .set("@", resolve("src")) // key,value自行定义,比如.set('@@', resolve('src/components'))
// .set("_c", resolve("src/components"))
// .set("_conf", resolve("config"));
},
/**
* 是一个函数,会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
* 更多细节可查阅：配合 webpack > 链式操作
* 链式操作：https://cli.vuejs.org/zh/guide/webpack.html#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C-%E9%AB%98%E7%BA%A7
*/
chainWebpack: config => {
},
/**
* css 相关配置
* https://cli.vuejs.org/zh/config/#css-modules
*/
css: {
/**
* 启用 CSS modules， v3中使用 modules 代替 requireModuleExtension，v4相反
* 默认：true
* 意义：默认情况下，只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。
* 设置为 false 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块。
*/
requireModuleExtension: true,
/**
* 是否使用css分离插件
* 提取 CSS 在开发环境模式下是默认不开启的，因为它和 CSS 热重载不兼容。然而，你仍然可以将这个值显性地设置为 true 在所有情况下都强制提取。
* 默认：生产环境下是 true，开发环境下是 false
*/
extract: true,
/**
* 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能。
* 默认：false
*/
sourceMap: false,
/**
* css预设器配置项，向 CSS 相关的 loader 传递选项。vue建议css 相关的 loader 的配置放在此处，而不是放在 webpack 的相关配置处
* 更多细节可查阅：向预处理器 Loader 传递选项:
* https://cli.vuejs.org/zh/guide/css.html#%E5%90%91%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8-loader-%E4%BC%A0%E9%80%92%E9%80%89%E9%A1%B9
*/
loaderOptions: {
// 向 postcss-loader 传递选项
postcss: {
plugins: [
autoprefixer(),
pxtoviewport({
viewportWidth: 375
})
]
}
}
},
/**
* webpack-dev-server 相关配置
*/
devServer: {
host: '0.0.0.0',
port: 8080, // 运行端口
https: false,
open: true, // 运行后是否自动打开页面
hotOnly: false,
proxy: {// 设置 API 代理
"/api": {// 匹配 url 前缀
//代理路径 例如 https://baidu.com
target: "https://baidu.com",
// 将主机标头的原点更改为目标URL
changeOrigin: true,
ws: true,
pathRewrite: {
"^/api": ""
}
}
},
before: app => {
// window.console.log(app);
},
},
/**
* 构建时开启多进程处理 babel 编译
* 默认：require('os').cpus().length > 1，即多余1个cpu就开启
*/
parallel: require('os').cpus().length > 1,
/**
* PWA 插件相关配置
*/
pwa: {},
/**
* 第三方插件配置
*/
pluginOptions: {
// ...
}
}
在管理界面重新运行项目，检查元素，单位已经由 px 转换为 vw：
切换机型，按钮也自适应机型改变大小：
postcss-px-to-viewport配置说明，可以查看官方说明地址，或下面的说明，以下为默认值：
{
unitToConvert: 'px',
viewportWidth: 320,
unitPrecision: 5,
propList: ['*'],
viewportUnit: 'vw',
fontViewportUnit: 'vw',
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: [],
landscape: false,
landscapeUnit: 'vw',
landscapeWidth: 568
}unitToConvert：(String) 需要转换的单位，默认为"px"
viewportWidth：(Number) 设计稿的视口宽度
unitPrecision：(Number) 单位转换后保留的精度
propList： (Array) 能转化为vw的属性列表1、传入特定的CSS属性； 2、可以传入通配符"*"去匹配所有属性，例如：['*']； 3、在属性的前或后添加"*",可以匹配特定的属性. (例如['position*'] 会匹配 background-position-y) 4、在特定属性前加 "!"，将不转换该属性的单位 . 例如: ['*', '!letter-spacing']，将不转换letter-spacing 5、"!" 和 "*"可以组合使用， 例如: ['*', '!font*']，将不转换font-size以及font-weight等属性viewportUnit：(String) 希望使用的视口单位
fontViewportUnit：(String) 字体使用的视口单位
selectorBlackList：(Array) 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。1、如果传入的值为字符串的话，只要选择器中含有传入值就会被匹配 例如 selectorBlackList 为 ['body'] 的话， 那么 .body-class 就会被忽略 2、如果传入的值为正则表达式的话，那么就会依据CSS选择器是否匹配该正则 例如 selectorBlackList 为 [/^body$/] , 那么 body 会被忽略，而 .body 不会minPixelValue：(Number) 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
mediaQuery： (Boolean) 媒体查询里的单位是否需要转换单位
replace：(Boolean) 是否直接更换属性值，而不添加备用属性
exclude：(Array or Regexp) 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件，vant不需要排除1、如果值是一个正则表达式，那么匹配这个正则的文件会被忽略 2、如果传入的值是一个数组，那么数组里的值必须为正则landscape：(Boolean) 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
landscapeUnit：(String) 横屏时使用的单位
landscapeWidth：(Number) 横屏时使用的视口宽度
适配处理结束。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。