Vue - cli 安装使用全流程：从配置 Node.js 到编写首个程序

最新推荐文章于 2025-03-29 22:48:35 发布

筱姌

最新推荐文章于 2025-03-29 22:48:35 发布

阅读量1k

点赞数 23

分类专栏： J2EE 文章标签： vue.js node.js 前端

本文链接：https://blog.youkuaiyun.com/u014114223/article/details/146238880

版权

J2EE 专栏收录该内容

3 篇文章

订阅专栏

（一）安装Node.js和NPM

1.下载Node.js安装包

（1）访问Node.js官网：Node.js — Run JavaScript Everywhere https://nodejs.org

推荐下载 LTS（长期支持版本），双击下载的安装包。

（2）双击安装包以后开始，安装Node.js，一直点next，并且同意用户协议

（3）修改安装包的安装路径

（4）按照安装向导默认配置完成安装（包括NPM包管理工具）。

（5）选择安装chocolatey（按照自我需求安装），我这里选择了安装chocolatey。

Chocolatey是一款适用于Windows系统的包管理工具，它具有以下重要作用：

软件安装与管理便捷：用户只需在命令行中输入简单的命令，就可以快速安装各种软件包，无需手动从各个软件官网下载安装程序，然后进行繁琐的安装步骤。例如，要安装Google Chrome浏览器，只需在命令行中输入`choco install googlechrome`，Chocolatey就会自动下载并安装最新版本的Google Chrome。而且，它还能方便地对已安装的软件进行更新、卸载等操作，如使用`choco update googlechrome`命令可更新Google Chrome到最新版本，使用`choco uninstall googlechrome`命令可卸载该软件。
依赖管理自动化：当安装某些软件时，可能存在依赖关系，即该软件需要其他软件或组件才能正常运行。Chocolatey能够自动处理这些依赖关系，确保在安装软件时，其所需的所有依赖项都能被正确安装。例如，安装一款需要.NET Framework支持的软件时，Chocolatey会检测系统中是否已安装所需版本的.NET Framework，如果没有，它会自动下载并安装相应版本，以保证软件能够正常运行。
支持命令行操作：对于熟悉命令行界面的用户和系统管理员来说，Chocolatey提供了高效的操作方式。可以通过编写脚本或在命令行中直接输入命令来批量安装、更新或卸载软件，这在部署软件到多台计算机或进行系统初始化配置时非常有用，能够大大提高工作效率，减少手动操作的时间和错误。
软件版本控制灵活：Chocolatey允许用户指定安装特定版本的软件包。如果某个软件的新版本存在兼容性问题，用户可以轻松安装指定的旧版本。例如，若某个软件的最新版本与现有系统配置不兼容，可使用`choco install software_name version=1.0.0`命令安装指定的1.0.0版本，满足不同用户在不同场景下对软件版本的特定需求。
集成于现有工作流：它可以很好地集成到各种自动化工具和脚本中，与持续集成/持续部署（CI/CD）流程相结合，实现软件安装和配置的自动化，有助于构建高效、可重复的软件部署流程，提升整个软件开发和运维的效率。

（6）点击install,完成安装

（7）完成安装，点击finish

2.验证安装

（1）打开命令行工具（Windows：CMD），win+R,输入cmd，打开cmd窗口

（2）在命令行窗口输入以下命令：

node -v  # 查看Node.js版本，如 v18.xx.x

npm -v    # 查看NPM版本，如 9.xx.x

若显示版本号，则安装成功。可以看出，已经安装成功。

3.配置相关环境

（1）如果 npm 的默认全局安装目录（如 C:\Users\你的用户名\AppData\Roaming\npm）被系统限制写入权限，可能导致安装失败。此时建议将全局包安装路径改为用户有完全控制权的目录（如 D:\nodejs\node_global）。

创建自定义目录（避免系统盘权限限制）：在 D:\nodejs（Node.js 安装目录）下新建两个文件夹：

node_global：存放全局安装的包（如 vue、cnpm）。

node_cache：存放 npm 缓存文件

（2）创建完毕后，复制创建的【node_global】和【node_cache】文件夹路径在cmd命令输入以下两条命令，用管理员身份打开cmd命令窗口，输入以下命令（按照自己对应的文件位置修改）

 ①npm config set prefix "D:\nodejs\node_global"

 ②npm config set cache "D:\nodejs\node_cache"

（3）使用以下命令行验证两条命令查看路径是否配置正确

npm config get prefix  # 应返回 D:\nodejs\node_global

npm config get cache   # 应返回 D:\nodejs\node_cache

（4）配置环境变量：此电脑-单击右键-属性-高级系统设置-环境变量，然后在系统变量中点击新建，也可以直接搜索查看高级系统设置

变量名：NODE_PATH
变量值：D:\nodejs\node_global\node_modules

（5）编辑用户变量中的Path，将默认的 C 盘下 AppData\Roaming\npm 修改成【node_global】的路径，点击确定，或者选择直接添加我们新建的路径。

（6）检验配置的环境变量，配置完成后，全局安装一个最常用的 express 模块进行测试（使用管理员方式打开cmd）可以看出来我们已经配置环境成功。

npm install express -g    // -g代表全局安装

4.安装cnpm

（1）安装淘宝镜像

npm config set registry https://registry.npmmirror.com

查看是否成功：

npm config get registry

（2）安装cnpm（按需安装）

npm是node官方的包管理器。cnpm是个中国版的npm，是淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm。

npm install -g cnpm --registry=https://registry.npmmirror.com

(3)运行以下命令清理 npm 缓存：

npm cache clean --force

(4)确保当前用户对 D:\nodejs\node_cache 目录有读写权限。如果没有权限，可以尝试修改目录权限：右键点击 D:\nodejs\node_cache 目录，选择“属性”。在“安全”选项卡中，确保当前用户有“完全控制”权限。如果没有，点击“编辑”并添加权限设置完全控制权限。

重新执行 npm install -g cnpm --registry=https://registry.npmmirror.com

（5）验证是否安装成功试用cnpm -v,发现安装成功

（二）安装Vue-cli脚手架

（1）全局安装Vue-cli，以管理员身份打开命令行工具（Windows：搜索 cmd → 右键选择“以管理员身份运行”）在命令行中执行：

npm install -g @vue/cli

-g 表示全局安装，使vue命令全局可用。

（2）验证安装是否成功

安装完成后，检查版本确认安装成功：

vue --version

虽然出现了大量 deprecated（已弃用）警告，这些警告不影响我们的成功配置，但根据最终提示 added 833 packages in 27s，说明 Vue CLI 已成功安装。可以选择升级Vue CLI：定期检查并升级到最新版本（当前最新为 5.0.8）

（三）通过vue指令创建Vue CLI项目

（1）初始化项目，进入目标目录（如桌面）：

cd Desktop

(2)创建新项目（以 lx-vue-app 为例）：

vue create lx-vue-app

（3）配置项目选项

使用方向键 ↑↓ 选择配置，按空格勾选功能（如 Babel、Router、Vuex），回车确认。此处选择了Vue3

（4）安装完成以后，进入项目目录

cd lx-vue-app

（四）运行指令使用Vue-cli脚手架

（1）启动开发服务器

npm run serve

（2）访问项目

打开浏览器访问 http://localhost:8080，看到Vue欢迎页面即为成功：

Vue Welcome Page

（3）项目目录结构详解

lx-vue-app/

├── node_modules/ # 项目依赖包（通过npm install生成）

├── public/        # 公共静态资源（直接复制到构建输出目录）

│   ├── favicon.ico

│   └── index.html # 项目入口HTML

├── src/           # 源码目录

│   ├── assets/    # 静态资源（图片、字体、CSS等）

│   │   └── logo.png

│   ├── components/ # 可复用的Vue组件

│   │   └── HelloWorld.vue

│   ├── router/    # 路由配置

│   │   └── index.js

│   ├── views/     # 页面级组件（如Home、About）

│   │   ├── Home.vue

│   │   └── About.vue

│   ├── App.vue    # 根组件（所有组件的父级）

│   └── main.js    # 入口JS文件（初始化Vue实例）

├── .gitignore     # Git忽略文件配置

├── package.json   # 项目配置和依赖列表

├── README.md      # 项目说明文档

└── babel.config.js # Babel配置文件

（五）创建新的Vue-cli项目

1.初始化项目

（1）进入目标目录（E:\vue）：打开命令行工具

Windows：按下 Win + R，输入 cmd 后回车，打开命令提示符。

# 切换到 E 盘

E:

# 创建目录（如果不存在）

mkdir vue

# 进入目录

cd vue

(2)创建新项目（以 my-vue-app 为例）：vue create my-vue-app

（3）配置项目选项

使用方向键 ↑↓ 选择配置，按空格勾选功能（如 Babel、Router、Vuex），回车确认。此处选择了【Manually selsct features】

（4）手动配置功能选择指南

必选功能（已默认勾选）

Babel：

作用：将 ES6+ 代码转译为兼容旧浏览器的 JavaScript。

建议：必选，无需取消。

Linter / Formatter：

作用：代码规范检查（如 ESLint）和格式化（如 Prettier）。

建议：必选，可提升代码质量和团队协作一致性。

2. 推荐根据需求选择的功能

Router（路由管理）

作用：集成 Vue Router，用于多页面应用的导航和路由管理。

适用场景：

需要多个页面（如首页、详情页、用户页）。

需要 URL 路径映射到不同组件。

建议：90% 的项目需要勾选，除非是纯单页静态应用。

Vuex（状态管理）

作用：集中管理全局状态（如用户登录信息、购物车数据）。

适用场景：

中大型项目，多个组件共享状态。

需要响应式全局数据管理的场景。

建议：中小型项目可暂不勾选，后续通过 npm install vuex 按需添加。

CSS Pre-processors（CSS 预处理器）

作用：支持 Sass/Scss、Less、Stylus 等 CSS 预处理语言。

适用场景：

需要使用嵌套语法、变量、Mixin 等高级 CSS 功能。

项目需要统一的样式管理（如主题切换）。

建议：根据团队习惯选择，若使用原生 CSS 可不选。

TypeScript（可选）

作用：为项目添加 TypeScript 支持，提供静态类型检查。

适用场景：

大型项目或团队协作，需增强代码健壮性。

长期维护项目，需减少运行时错误。

建议：新手或小型项目可暂不勾选，避免增加复杂度。

Unit Testing / E2E Testing（测试工具）

作用：集成单元测试（如 Jest）和端到端测试（如 Cypress）。

适用场景：

企业级项目，需自动化测试保障质量。

开源项目或持续集成（CI/CD）场景。

建议：学习或简单项目可暂不勾选，后续按需添加。

3.不推荐选择的功能

Progressive Web App (PWA) Support：

作用：将应用转换为渐进式 Web 应用（支持离线访问、推送通知）。

建议：除非明确需要 PWA 特性，否则无需勾选。

（5）勾选功能（按空格键选择）

选择 Vue 3 版本。

启用路由的 History 模式（推荐）。

选择 ESLint 规则（如 ESLint + Prettier）。

代码检查时机选择 Lint on save。

In dedicated config files（独立配置文件）

Save preset as:保存为一个预设模板，以便未来创建新项目时直接复用，无需重新手动勾选配置

下次使用：选择预设 vue3-standard → 自动生成相同配置的项目。
```
vue create new-project
```

2.安装完成以后，进入项目目录 cd my-vue-app

3.启动开发服务器

npm run serve

4.访问项目

打开浏览器访问 http://localhost:8080，看到Vue欢迎页面即为成功：

Vue Welcome Page

5.项目结构介绍

my-vue-app/

├── node_modules/       # 项目依赖包（npm install 生成）

├── public/             # 静态资源（直接复制到构建输出目录）

│   ├── favicon.ico     # 网站图标

│   └── index.html      # 项目入口 HTML 模板

├── src/                # 源码目录（核心开发区域）

│   ├── assets/         # 静态资源（图片、字体、CSS 等）

│   │   └── logo.png    # Vue 默认 Logo

│   ├── components/     # 可复用的 Vue 组件

│   │   └── HelloWorld.vue # 示例组件

│   ├── router/        # 路由配置（由 Vue Router 生成）

│   │   └── index.js   # 路由定义文件

│   ├── store/         # 状态管理（由 Vuex 生成）

│   │   └── index.js   # Vuex Store 定义文件

│   ├── views/         # 页面级组件（如 Home、About）

│   │   ├── HomeView.vue

│   │   └── AboutView.vue

│   ├── App.vue        # 根组件（所有组件的父级）

│   └── main.js        # 入口文件（初始化 Vue 实例）

├── .browserslistrc    # 浏览器兼容性配置（如支持的浏览器版本）

├── .eslintrc.js       # ESLint 配置文件（代码规范检查规则）

├── babel.config.js    # Babel 配置文件（转译规则）

├── package.json       # 项目配置和依赖列表

├── package-lock.json # 依赖版本锁定文件（自动生成）

└── README.md          # 项目说明文档

可以发现两次项目的结构有所不同，选择手动配置功能的项目更加全面一点。

6.关键操作总结

（六）两个项目的异同比较

1.相同点

（1）核心框架与工具链

Vue 3：均基于 Vue 3 开发。

Vue CLI：使用 Vue CLI 脚手架生成项目结构。

Babel：默认集成 Babel 实现 ES6+ 语法转译。

Webpack：底层依赖 Webpack 进行构建。

（2）基础目录结构

public/：存放静态资源和入口 HTML 文件。

src/：源码目录，包含 assets、components、views 等子目录。

package.json：项目依赖和脚本配置。

main.js：Vue 实例初始化入口文件。

App.vue：根组件。

（3）开发流程

均通过 npm run serve 启动开发服务器，支持热更新。

通过 npm run build 生成生产环境代码。

2.不同点

3.总结

（1）项目定位

my-vue-app：适合中后台管理系统（依赖 Router + Vuex）。

lx-vue-app：可能更适合轻量级应用或快速原型开发。

（2）协作建议

统一核心依赖版本（如 Vue、Vuex）避免兼容性问题。

约定代码规范配置（如 ESLint 规则）保证代码一致性。

（3）功能扩展

若 lx-vue-app 缺少必要功能（如路由），可通过 npm install vue-router 手动添加。

（七）Vue.js 官网地址以及对应下载

Vue.js - The Progressive JavaScript Framework | Vue.js

核心功能：
- 文档：提供 Vue 2 和 Vue 3 的官方文档，涵盖基础语法、组件、路由、状态管理等。
- 下载：支持多种安装方式（CDN、npm、Vite、Vue CLI）。
- 生态系统：推荐与 Vue 搭配使用的工具（如 Vue Router、Vuex、Pinia、Vite 等）。
适用场景：
- 学习 Vue 语法和最佳实践。
- 下载 Vue 核心库或相关工具。
- 查看最新版本更新和迁移指南。

下载方式

直接通过 npm 安装（推荐）：
```
npm install vue
```

CDN 引入（适合快速原型开发）：

<!-- 开发环境版本（含调试警告） --> 
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> 
<!-- 生产环境版本（优化后） -->
 <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

Vue CLI 脚手架（适合复杂项目）：
```
npm install -g @vue/cli
```

直接下载 JS 文件
访问下载页
- Vue 3：Quick Start | Vue.js
- Vue 2：Installation — Vue.js
保存文件：下载 vue.global.js（开发版）或 vue.global.prod.js（生产版）。

访问 Vue.js 官网下载页 打开浏览器，访问 Vue 3 或 Vue 2 的 CDN 链接：
- Vue 3 最新版本：
  - 开发版（含调试信息）：https://unpkg.com/vue@3/dist/vue.global.js
  - 生产版（压缩优化）：https://unpkg.com/vue@3/dist/vue.global.prod.js
- Vue 2 最新版本：
  - 开发版：https://unpkg.com/vue@2.7.16/dist/vue.js
  - 生产版：https://unpkg.com/vue@2.7.16/dist/vue.min.js

（八）第一个vue程序

方式一：Vue 3 CDN引入（推荐新项目）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue3 CDN 示例</title>
    <!-- 使用最新Vue3 CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ greeting }}</h1>
        <button @click="toggleVisibility">显示/隐藏</button>
        <p v-show="isVisible">现在你看到我了！</p>
    </div>

    <script>
        // Vue3 组合式API
        const { createApp } = Vue
        
        createApp({
            data() {
                return {
                    greeting: 'Vue3 你好！',
                    isVisible: true
                }
            },
            methods: {
                toggleVisibility() {
                    this.isVisible = !this.isVisible
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

方式二：模块化构建（使用Vite + Vue3）

创建项目

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev

2.组件化开发（App.vue）

<template>
  <div>
    <h2>{{ title }}</h2>
    <input v-model="inputText" placeholder="输入内容">
    <p>输入内容：{{ inputText }}</p>
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const title = ref('Vite + Vue3 项目')
const inputText = ref('')
const list = reactive([
  { id: 1, text: '学习Vue3' },
  { id: 2, text: '掌握组合式API' }
])
</script>

方式三：单文件组件（SFC）本地运行

<!-- 需要本地服务器运行 -->
<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app"></div>

    <script type="module">
        // 单文件组件逻辑
        const app = Vue.createApp({
            template: `
                <div>
                    <h3>本地组件</h3>
                    <p>当前时间：{{ currentTime }}</p>
                    <button @click="updateTime">刷新时间</button>
                </div>
            `,
            data() {
                return {
                    currentTime: new Date().toLocaleString()
                }
            },
            methods: {
                updateTime() {
                    this.currentTime = new Date().toLocaleString()
                }
            }
        })
        
        app.mount('#app')
    </script>
</body>
</html>

方式四：Vue CLI项目（传统脚手架）

全局安装（需要Node.js）

npm install -g @vue/cli
vue create my-project
# 选择Vue2/Vue3版本
cd my-project
npm run serve

2.组件示例（HelloWorld.vue）

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="counter++">点击次数：{{ counter }}</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      counter: 0
    }
  }
}
</script>

根据需求选择：

学习/简单Demo → CDN方式
新项目开发 → Vite方式
企业级项目 → Vue CLI（或Vite）
组件复用 → 单文件组件

记得：

Vue2项目使用选项式API
Vue3推荐使用组合式API
生产环境建议使用构建工具打包

方式五：直接引用vue.js(本地下载）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Local Vue Example</title>
    <!-- 引入本地下载的vue.js -->
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <button @click="increment">点击计数：{{ count }}</button>
        <p v-if="count > 5" style="color: red">已经超过5次点击了！</p>
    </div>

    <script>
        // 创建Vue实例
        new Vue({
            el: '#app',
            data() {
                return {
                    message: '欢迎使用Vue!',
                    count: 0
                }
            },
            methods: {
                increment() {
                    this.count++
                }
            }
        })
    </script>
</body>

</html>