vue2.x+webpack快速搭建前端项目框架详解

Vue2.x+Webpack快速搭建前端项目框架攻略

本文介绍如何使用Vue2.x和Webpack快速搭建前端项目框架。这里提供一个完整的步骤来创建一个简单的Vue应用程序，以及一些示例来解释这些步骤。

步骤1：创建项目

首先，我们需要创建一个新项目。可以使用vue-cli来创建新项目，它将为我们处理所有必要的设置。

vue create my-project

在这里，我们将项目命名为“my-project”，然后按照提示选择使用默认设置或自定义设置。vue-cli将为我们自动安装所有必要的依赖项。

步骤2：添加Webpack配置

Vue CLI内置了Webpack并生成了默认配置文件。如果我们想要自定义Webpack配置，那么我们需要先将配置文件从Vue CLI生成的默认位置中提取出来。

vue inspect > webpack.config.js

然后，根据我们的需要修改“webpack.config.js”文件。
例如，我们可以添加一些自定义的loader和plugin，像这样：

// webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      // add a custom babel loader
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      // add a custom css loader
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  // add a custom plugin
  plugins: [
    new webpack.ProgressPlugin(),
  ]
  // ...
}

步骤3：开发和构建

现在，我们可以开始开发我们的Vue应用程序，构建文件并查看结果。使用以下命令启动开发服务器：

npm run serve

这将启动Vue的开发服务器，我们可以在浏览器中查看应用程序。默认情况下，应用程序将在http://localhost:8080上运行。

App running at:
- Local:   http://localhost:8080/
- Network: http://192.168.0.100:8080/

使用以下命令构建应用程序：

npm run build

这将在“dist”文件夹中生成打包后的文件。

示例1：添加SASS支持

假设我们的Vue应用程序还需要使用SASS文件。我们可以使用以下步骤添加SASS支持：

安装node-sass和sass-loader包。

npm install node-sass sass-loader --save-dev

更新webpack配置

在webpack.config.js的rules中加入SASS相关的loader：

{
    test: /\.scss$/,
    use: [
        'vue-style-loader',
        'css-loader',
        'sass-loader'
    ]
}

使用SASS

在组件中需要使用SASS时，可以使用如下的方式导入SASS文件：

<template>
  <div class="my-class">
    Hello World
  </div>
</template>

<script>
import './MyComponent.scss';
export default {}
</script>

<style>

</style>

示例2：添加TypeScript支持

假设我们的Vue应用程序还需要使用TypeScript文件。我们可以使用以下步骤添加TypeScript支持：

安装TypeScript和ts-loader包。

npm install typescript ts-loader --save-dev

新建“tsconfig.json”配置文件

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "jsx": "preserve",
    "sourceMap": true,
    "experimentalDecorators": true,
    "strictNullChecks": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ],
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

更新webpack配置

在webpack.config.js的rules中加入TypeScript相关的loader：

{
    test: /\.ts$/,
    loader: "ts-loader",
    options: { appendTsSuffixTo: [/\.vue$/] }
}

使用TypeScript

在组件中需要使用TypeScript时，可以使用如下的方式：

<template>
  <div class="my-class">
    Hello World {{ name }}
  </div>
</template>

<script lang="ts">
export default {
  data(): any {
    return {
      name: 'Vue'
    };
  }
}
</script>

<style>

</style>

这样，我们就可以轻松地将TypeScript添加到Vue应用程序中了。