Vue填坑之路——Day4（项目）

最新推荐文章于 2025-10-13 14:38:04 发布

原创最新推荐文章于 2025-10-13 14:38:04 发布 · 362 阅读

CC 4.0 BY-SA版权

本文介绍了如何手动构建一个Vue项目，包括新建项目文件夹、初始化package.json，以及安装和配置webpack。重点讲解了autoprefixer的用途和安装，它是PostCSS的一个插件，用于自动为CSS添加浏览器前缀。此外，还讨论了Babel在Vue项目中的作用，特别是如何安装和配置Babel以支持ES2015以上的语法。

项目构建

准备工作

新建项目文件夹demo，初始化package.json 文件

npm init

安装webpack到项目目录

npm install --save-dev webpack

安装各种包

npm install 命令会安装package.json 中的依赖。借助Vue官方CLI生成的package.json 文件，我们来看看需要哪些依赖，并尝试自己安装、配置。

"devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.1.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  }

autoprefixer

PostCSS 是一个允许使用 JS 插件转换样式的工具。这些插件可以检查（lint）你的 CSS，支持 CSS Variables 和 Mixins，编译尚未被浏览器广泛支持的先进的 CSS 语法，内联图片，以及其它很多优秀的功能。
PostCSS 的 Autoprefixer插件是最流行的 CSS 处理工具之一。

安装

npm install --save-dev autoprefixer postcss-loader

配置

 var autoprefixer = require('autoprefixer')
 module.exports = {
    module: {
        loaders: [
        {
            test: /\.css$/,
            loaders: ['postcss-loader']
        }
        ]
    },

    postcss: [autoprefixer({browsers:['last 2 versions']})]
 }

babel

babel-core – Babel compiler core
babel-loader
babel-preset-env babel preset将基于你的实际浏览器及运行环境，自动的确定babel插件及polyfills，转译ES2015及此版本以上的语言
babel-helper-vue-jsx-merge-props – babel helper for vue jsx spread
babel-plugin-syntax-jsx – Allow parsing of jsx
babel-plugin-transform-runtime – Externalise references to helpers and builtins, automatically polyfilling your code without polluting globals.