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 项目的开发与部署全过程。