搭建vue需要了解webpack。

1. npm init。

新建一个webpack_demo的目录，在该目录使用此命令初始化一个package.json管理安装包。执行后会有一堆问题，默认回车即可，这样就在根目录得到一个package.json的文件，内容如下

{
  "name": "webpack_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

2. npm install webpack webpack-dev-server

使用该命令安装webpack和webpack服务器，执行完毕之后，在package.json中会增加webpack和webpack-dev-server依赖。webapck-dev-server会启动一个web服务器，并可以热加载。

"dependencies": {
    "webpack": "^5.70.0",
    "webpack-dev-server": "^4.7.4"
}

3. index.html文件和main.js文件

在根目录新建index.html和main.js文件，index.html作为服务器入口，main.js作为webapck打包入口。

index.hmtl

<!DOCTYPE html>
<html>
    <head>
        <title>起步</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="app">
            Hello World
        </div>
        <script src="./main.js"></script>
    </body>
</html>

4. webpack.config.js

在根目录新建一个webpack.config.js文件，并做如下配置。完成后运行 npm webpack serve就能启动服务器了。恭喜你，webpack环境已经搭建好了。

module.exports = {
    entry: './main.js', //webpack打包入口
    devServer: {
        static: './'  // webpack服务器访问入口
    },
    mode: 'development', // 开发模式
}

其实这里只需要配置devServer这个就可以让服务器启动了，但是entry和mode不配的话会有相应的报错，可以自行注释掉之后尝试。

在main.js中写入如下代码，保存后，可以看到浏览器内容直接变了，说明服务器热加载已经启用了。

document.getElementById('app').innerHTML = 'hello vue';

5. 安装babel

为了使用ES6语法，需要安装babel-loader，执行下面命令，可以直接安装babel对应的loader，必须babel-loader和@babel/core一起安装，才能保证版本相匹配。

npm install --save-dev babel-loader @babel/core

在webpack.config.js中配置babel-loader

{
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

新建一个babel.config.json，里面写上，并运行命令 npm install @babel/preset-env --save-dev

babel.config.json

{
  "presets": ["@babel/preset-env"]
}


命令行
npm install @babel/preset-env --save-dev

这样就配置好babel-loader了。打开main.js写一段ES6代码

document.getElementById('app').innerHTML = 'hello vue';

let str = 'vue.js';
console.log(str);

保存后，可以看到控制台打印出vue.js证明babel-loader配置起效了。

6. 安装vue、vue-loader、vue-templare-compiler 

这里安装vue 2，对应vue-loader 15 ，对于vue-template-compiler 2。

npm install vue@2 vue-loader@15 vue-template-compiler@2 --save-dev

7.配置vue-loader

Vue Loader 的配置和其它的 loader 不太一样。除了通过一条规则将 vue-loader 应用到所有扩展名为 .vue 的文件上之外，请确保在你的 webpack 配置中添加 Vue Loader 的插件：

const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
    ...
    module: {
        ...
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader'
          }
        ],
    },
    plugins: [
      // 请确保引入这个插件！
      new VueLoaderPlugin()
    ],
}

这个插件是必须的！ 它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块。例如，如果你有一条匹配 /\.js$/ 的规则，那么它会应用到 .vue 文件里的 <script> 块。 

8. 安装 css-loader、vue-style-loader

npm install css-loader vue-style-loader

到此vue的所有配置都安装完成了，写一段vue代码。

9. 运行vue代码

在mian.js中敲入下面代码

import Vue from 'vue';

let app = new Vue({
    el: '#app',
    data: {
        message: 'vue.js',
    }
})
console.log(app.message)

运行npm run dev，会发现报错了

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not 
available. Either pre-compile the templates into render functions, or use the compiler-
included build.

这是因为在vue 2 中，默认 npm 包导出的是运行时构建，即 runtime 版本，不支持编译 template 模板。可以看vue的package.json文件中，main字段

"main": "dist/vue.runtime.common.js",

而真正可以用的是vue.js文件，可以支持编译template。

这里我们有两种方法解决这个问题，一种是在导入时写明vue引用.

import Vue from 'vue/dist/vue.js';

一种是在webpack.config.js别名配置中配置vue别名

resolve: {
   // alias创建 import 或 require 的别名，来确保模块引入变得更简单
   alias: {
     vue: 'vue/dist/vue.js', 
   }
},

修改完毕之后，再次运行npm run dev，就可以看到正常的页面了。

10. 编写.vue文件并运行

在根目录新建App.vue文件，敲入下面代码

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
  font-size: 24px;
}
</style>

在main.js里面修改代码

import Vue from 'vue';
import App from './App.vue';

let app = new Vue({
    el: '#app',
    render: h => h(App),
})

 运行npm run dev 可以看到.vue文件也正常运行了。

到此，vue 2的环境算是初步搭建完成了，后续有其他需求，继续配置安装即可。

最后，如果遇到包版本不匹配的情况，就在package.json里面看一下对应的依赖版本是多少，下载对应版本的包即可。比如vue2 对应vue-loader15-，vue3对应vue-loader16+等等。

参考网站：

babel: Babel 中文网 · Babel - 下一代 JavaScript 语法的编译器

webpack: 起步 | webpack 中文网  解析(resolve) | webpack 中文网

vue-loader: 起步 | Vue Loader

# vue.js
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

GaussDB数据库SQL系列-复合查询

avatar 华为云开发者联盟