淡泊以明志,宁静以致远

# 安装

关于旧版本

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

Node 版本要求

Vue CLI 需要 Node.js (opens new window) 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm (opens new window) 或 nvm-windows (opens new window) 在同一台电脑中管理多个 Node 版本。

# 安装 node.js

  • 下载node.js (opens new window)
  • 安装好后键入 node -v 以及 npm -v 来测试是否安装成功
  • 由于国内镜像下载很慢可以安装淘宝镜像,安装成功后，可以键入 cnpm -v 检查是否安装成功
npm install -g cnpm --registry=https://registry.npm.taobao.org

# 全局安装 @vue/cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli

# 创建项目

vue create xxx
# OR 使用图形化界面进行创建
vue ui

# 运行项目

npm run start

# 引入 scss 全局变量

  • 安装 sass-resouces-loader
npm i sass-resources-loader -D
  • 进入根项目的 vue.config.js 文件，增加如下配置
const path = require("path");

module.exports = {
    chainWebpack: config => {
        const oneOfsMap = config.module.rule("scss").oneOfs.store;
        oneOfsMap.forEach(item => {
            item.use("sass-resources-loader")
                .loader("sass-resources-loader")
                .options({
                    resources: [path.resolve(__dirname, "xxx.scss")]
                })
                .end();
        });
    }
};

# 对安卓低版本系统和 IE 上白屏问题解决

  • 根目录下新建 .babelrc 文件 ** 在项目根目录下新建 .babelrc 文件，跟 package.json 同级。 将以下代码复制到 .babelrc 文件中
{
  "presets": ["@babel/preset-env"],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}
  • 修改 babel.config.js
module.exports = {
    presets: [
        [
            "@vue/app",
            {
                useBuiltIns: "entry",
                polyfills: ["es6.promise", "es6.symbol"]
            }
        ]
    ]
};
  • 修改 vue.config.js
module.exports = {
    transpileDependencies: ["webpack-dev-server/client"],
    chainWebpack: config => {
        config.entry.app = ["babel-polyfill", "./src/main.js"];
    }
};
  • 修改 main.js 文件
import "@babel/polyfill";
import Es6Promise from "es6-promise";
Es6Promise.polyfill();
  • 安装依赖
npm install --save-dev @babel/core @babel/plugin-transform-runtime @babel/preset-env es6-promise babel-polyfill

# 引入 postcss-px-to-viewport 插件

npm install postcss-loader postcss-px-to-viewport --save-dev
  • 在 vue.config.js 里配置
module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require("postcss-px-to-viewport")({
                        unitToConvert: "px",
                        viewportWidth: 750,
                        unitPrecision: 3,
                        propList: ["*"],
                        viewportUnit: "vw",
                        fontViewportUnit: "vw",
                        selectorBlackList: [],
                        minPixelValue: 1,
                        mediaQuery: false,
                        replace: true,
                        exclude: /(\/|\\)(node_modules)(\/|\\)/
                    })
                ]
            }
        }
    }
};

← VueCLI4.x →