Vue的安裝及環境配置

一、安裝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/zh-tw/n/369671.html