Vue-Cli教程 - 初学者快速上手指南-原创手记-慕课网

Vue-Cli 简介

Vue-Cli 是 Vue.js 官方提供的命令行工具，旨在帮助开发者高效创建、开发和部署 Vue.js 项目，通过一站式解决方案简化项目管理流程。其核心优势包括快速项目初始化、自适应环境配置、丰富的插件生态系统以及自动化构建流程，显著提升开发效率。

优势亮点：

快速项目初始化：一键生成项目结构，避免手动搭建。
自适应环境配置：自动调整项目配置，减少错误和调试时间。
插件生态系统：集成常用工具如 ESLint、Vue Router，提升开发质量。
自动化构建与部署：简化构建、打包和发布流程。

安装 Vue-Cli

要开始使用 Vue-Cli，首先确保已安装 Node.js，并通过 npm 完成 Vue-Cli 的全局安装：

npm install -g @vue/cli

安装完毕后，即可使用 Vue-Cli 创建全新项目：

vue create my-project
cd my-project
npm run serve

浏览器将自动加载项目首页 http://localhost:8080，展示项目启动界面。

Vue-Cli 项目结构

Vue-Cli 自动构建的项目结构如下：

my-project/
├── node_modules/      # 项目依赖包
├── public/            # 公共文件，包括 HTML 和静态资源
│   └── index.html     # 入口 HTML 文件
├── src/               # 项目源代码
│   ├── main.js        # 入口脚本
│   ├── components/    # 组件目录
│   ├── router/        # 路由配置
│   ├── store/         # 状态管理
│   ├── App.vue        # 应用入口组件
│   └── assets/        # 静态资源目录
│       └── styles/    # 样式文件
└── package.json       # 项目依赖和脚本配置
└── vue.config.js     # 项目配置文件

编写 Vue-Cli 项目

使用 Vue CLI 创建组件

使用 Vue CLI 创新组件：

vue create HelloWorld.vue

打开 HelloWorld.vue 文件：

<template>
  <div>
    <h1>Hello, Vue!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

组件内同时包含模板、脚本和样式，便于快速开发和实现功能。

组件生命周期与使用方法

Vue.js 组件在不同阶段有特定生命周期：

created()：实例创建完成后立即调用。
mounted()：DOM 被渲染后调用。

示例代码：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from the component!'
    };
  },
  mounted() {
    console.log('组件已挂载');
  }
}
</script>

Vue-Cli 项目配置

配置文件 vue.config.js 精细化调整：

module.exports = {
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static',
  productionSourceMap: false,
  devServer: {
    port: 8080,
    open: true
  }
};

部署 Vue-Cli 项目

构建项目：

npm run build

生成的 dist 文件夹包含构建后的静态资源，适合部署。部署流程分为本地部署和线上部署。

本地部署

使用 http-server 快速启动本地服务器：

npm install -g http-server
http-server dist -p 8080

线上部署

线上部署需关注服务器配置、域名绑定和 SSL 证书。

服务器配置：
- 确保服务器支持 HTTP/HTTPS 。
域名绑定：
- 配置 DNS 指向域名。
SSL 证书：
- 为 HTTPS 加密购买并安装证书。

通过以上步骤，您可以高效完成 Vue.js 项目的开发与部署全过程。