实现vue cli

安装 Vue CLI

确保系统已安装 Node.js（建议版本 12 及以上）。通过 npm 全局安装 Vue CLI：

npm install -g @vue/cli

验证安装是否成功：

vue --version

创建新项目

使用 Vue CLI 创建新项目，替换 project-name 为实际项目名称：

vue create project-name

交互式命令行中选择预设配置（默认或手动），手动配置可勾选 Babel、Router、Vuex 等功能。

启动开发服务器

进入项目目录并启动开发服务器：

cd project-name
npm run serve

访问 http://localhost:8080 查看项目。

构建生产版本

生成优化后的生产环境代码：

npm run build

构建结果默认输出到 dist 目录。

添加插件

通过 Vue CLI 添加官方插件（如 Vue Router）：

vue add router

项目结构说明

关键目录与文件：

• src/：核心代码目录
  • main.js：应用入口文件
  • App.vue：根组件
  • components/：存放可复用组件
• public/：静态资源目录
• babel.config.js：Babel 配置
• package.json：项目依赖和脚本

自定义配置

创建 vue.config.js 覆盖默认配置，例如修改端口：

module.exports = {
  devServer: {
    port: 8081
  }
}