Ubuntu 上轻松安装 Vue.js：打造坚实工程的基础

引言

在当今快速发展的数字世界中，前端开发已成为不可或缺的一部分。为了简化和加速 Web 开发过程，Vue.js 应运而生，它是一种渐进式 JavaScript 框架，以其轻量级、响应式和可扩展性而广受赞誉。如果您正考虑使用 Vue.js 踏入前端开发的领域，那么在 Ubuntu 上设置一个健壮的工程至关重要。本文将为您提供分步指南，带您轻松完成 Ubuntu 上的 Vue.js 安装和工程创建过程。

Ubuntu 上安装 Vue.js

1. 更新系统软件包： 在开始之前，更新您的系统软件包以确保您拥有最新的依赖项：

   sudo apt update && sudo apt upgrade
   

2. 安装 Node.js 和 npm： Vue.js 依赖于 Node.js 和 npm（Node.js 包管理器）。使用以下命令安装它们：

   sudo apt install nodejs npm
   

3. 全局安装 Vue.js CLI： Vue.js CLI 是一个命令行工具，可简化 Vue 工程的创建和管理：

   sudo npm install -g @vue/cli
   

创建 Vue 工程

1. 创建新工程： 在您选择的目录中，使用 Vue CLI 创建一个新的 Vue 工程：

   vue create my-vue-project
   

2. 选择工程预设： 选择一个预设（如 Default 或 Manually），该预设定义了工程的初始设置。

3. 安装依赖项： 安装工程所需的依赖项：

   cd my-vue-project
   npm install
   

配置 webpack 和 babel

webpack 是一个模块打包器，而 babel 是一个编译器，它们共同帮助管理和转换工程中的代码：

1. 安装 webpack 和 babel： 安装 webpack 和 babel 的开发和生产依赖项：

   npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env
   

2. 创建 webpack 配置文件： 在 my-vue-project 目录中创建 webpack.config.js 文件：

   const path = require('path');
   
   module.exports = {
     entry: './src/main.js',
     output: {
       path: path.resolve(__dirname, 'dist'),
       filename: 'bundle.js'
     },
     module: {
       rules: [
         {
           test: /\.js$/,
           loader: 'babel-loader',
           exclude: /node_modules/
         }
       ]
     },
     plugins: [],
     mode: 'development'
   };
   

3. 创建 babel 配置文件： 在 my-vue-project 目录中创建 .babelrc 文件：

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

4. 添加脚本到 package.json： 将以下脚本添加到工程的 package.json 文件中：

   "scripts": {
     "dev": "webpack serve --open",
     "build": "webpack --mode production"
   }
   

运行和构建工程

1. 运行开发服务器： 使用以下命令运行开发服务器：

   npm run dev
   

2. 构建工程： 使用以下命令构建工程：

   npm run build
   

结论

恭喜您！您已经成功地在 Ubuntu 上安装了 Vue.js 并创建了一个 Vue 工程。通过遵循本指南中的步骤，您已经为您的前端开发之旅奠定了坚实的基础。现在，您可以开始探索 Vue.js 的强大功能，并创建响应式、交互式和用户友好的 Web 应用程序。随着持续的实践和对 Vue.js 生态系统的深入探索，您将能够掌握这项出色的 JavaScript 框架，并为您的项目带来卓越的用户体验。