Vue的安装及环境配置

EFKNX • 2025-04-13 11:45 • 编程

一、安装Node.js

Vue.js是基于Node.js的，所以在安装Vue之前，需要先安装Node.js。

在Node.js的官网 https://nodejs.org/en/ 上可以下载Node.js的安装包，选择对应的系统平台和版本进行下载，在安装过程中，一路默认即可。

安装完成后，可以打开命令行工具，输入“node -v”命令，如果出现安装Node.js的版本号，则说明Node.js已经成功安装。

二、安装Vue.js

在Node.js安装完成之后，即可通过npm（Node.js的包管理工具）安装Vue.js。

1.通过CDN引入

在HTML文件中，通过CDN引入Vue.js的方式来使用Vue.js。可以从官方网站 https://cdn.jsdelivr.net/npm/vue/ 中获取最新版本的CDN链接。

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue!'
        }
      })
    </script>
  </body>
  </html>

2.通过Vue CLI创建项目

Vue CLI是Vue.js官方提供的命令行工具，可以快速创建Vue项目，并支持自定义配置。

首先需要全局安装Vue CLI：

  npm install -g @vue/cli

安装完成后，可以在命令行工具中使用Vue CLI创建项目：

  vue create my-project

其中，my-project为项目名称。

在创建项目的过程中，可以选择使用默认配置或进行自定义配置。

创建完成后，进入项目目录，执行以下命令启动项目：

  cd my-project
  npm run serve

在浏览器中访问 http://localhost:8080 便可以看到Vue的欢迎页面。

三、Vue.js环境配置

在Vue.js的开发中，部分第三方包或者语法需要进行支持，需要进行相关环境的配置。

1.Vue脚手架中的webpack配置

Vue脚手架使用的是webpack进行打包和编译的，在Vue脚手架生成的项目目录中，可以找到webpack配置文件：

  /my-project
    /node_modules
    /public
    /src
    /tests
    babel.config.js
    jest.config.js
    package.json
    vue.config.js
    README.md
    webpack.config.js
    yarn.lock

可以通过修改webpack.config.js文件对webpack进行配置，例如可以在webpack配置中添加对scss编译的支持：

  const path = require('path')
  const webpack = require('webpack')

  module.exports = {
    //其他配置
    module: {
      rules: [{
        test: /\.scss$/,
        use: [{
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'sass-loader',
            options: {
              includePaths: [
                path.resolve(__dirname, './src/assets/scss/')
              ]
            }
          }
        ]
      }]
    }
  }

2.babel配置

Vue中使用了ES6的语法，为了兼容低版本浏览器，需要将ES6的语法转换为ES5的语法，这个过程需要通过Babel来完成。

可以先安装babel及其相关依赖：

  npm install --save-dev babel-core babel-loader babel-preset-env

然后在webpack配置文件中添加babel配置：

  {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    options: {
      babelrc: false,
      presets: [
        [
          'env',
          {
            modules: false,
            targets: {
              browsers: ['> 1%', 'last 2 versions', 'not ie <= 8']
            }
          }
        ]
      ]
    }
  }

3.ESLint配置

ESLint是一个语法检查工具，可以帮助开发者检查代码是否符合规范，避免潜在的错误。

可以先安装ESLint及其相关依赖：

  npm install --save-dev eslint eslint-loader

然后在webpack配置文件中添加ESLint配置：

  {
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    enforce: 'pre',
    exclude: [/node_modules/,/\.vue$/],
    options: {
      formatter: require('eslint-friendly-formatter'),
      // eslint-disable-next-line
      emitWarning: false
    }
  }

四、小结

Vue.js的安装和环境配置是开发Vue应用的必要步骤，通过本文的介绍，可以更加深入地了解在Vue.js开发过程中的相关工具和配置，为开发更加高效和规范的Vue.js应用提供了基础知识。

原创文章，作者：EFKNX，如若转载，请注明出处：https://www.506064.com/n/369671.html