为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 Vue CLI教程：初学者快速上手指南

Vue CLI教程：初学者快速上手指南

标签：
Vue.js
概述

Vue CLI教程介绍了Vue CLI的使用方法，从安装到创建第一个Vue项目，涵盖了详细的步骤和命令。教程还讲解了路由管理、资源打包与部署等内容，帮助开发者快速上手并高效使用Vue CLI。

Vue CLI教程：初学者快速上手指南
Vue CLI简介

Vue CLI是什么

Vue CLI（Vue Command Line Interface）是Vue.js官方提供的脚手架工具，它用于快速创建Vue.js项目。通过使用Vue CLI，开发者可以轻松地初始化新的Vue.js项目，配置开发环境，并自定义项目的结构。Vue CLI提供了一组预定义的配置选项，能够帮助开发者快速搭建起一个可扩展、可维护的Vue.js应用。

为什么使用Vue CLI

使用Vue CLI有几个主要的原因：

  • 快速启动项目：Vue CLI提供了多种预设配置，使得开发者能够快速地创建和初始化新的Vue项目。
  • 管理依赖：Vue CLI自动处理项目依赖的安装和管理，保证项目的依赖环境一致性。
  • 配置自定义：开发者可以在创建项目时选择不同的预设（presets），如选择使用路由（Vue Router）、状态管理（Vuex）等，或者自定义项目配置。
  • 开发环境配置：Vue CLI自动配置开发工具，例如热重载（Hot Reload）、代码检查（ESLint）等，简化开发流程。
  • 构建工具集成：Vue CLI内置了Webpack作为构建工具，自动配置好各种开发和生产环境下的构建设置。
  • 跨浏览器兼容性：Vue CLI提供预设的构建配置，确保应用能够在各种主流浏览器环境中正常运行。

使用Vue CLI可以大大提高开发效率，减少配置工作，使开发者可以将更多精力投入到核心业务逻辑的实现上。

安装Vue CLI

安装Node.js环境

要使用Vue CLI，首先需要安装Node.js和npm（Node.js的包管理器）。Vue CLI要求Node.js版本至少为8.9.0，而npm版本至少为5.5.0。

  1. 访问Node.js官网。
  2. 下载并安装最新版本的Node.js，安装过程中会自动安装npm。
  3. 安装完成后，可以通过命令行检查Node.js和npm版本来确认安装是否成功：
# 检查Node.js版本
node -v

# 检查npm版本
npm -v

确保两个版本符合要求，若版本过低，需要先升级Node.js和npm。

使用npm安装Vue CLI

安装完Node.js和npm后，通过npm全局安装Vue CLI，执行以下命令：

npm install -g @vue/cli

安装完成后，通过执行vue --version来确认Vue CLI已经安装成功：

vue --version

输出版本号表示安装成功。接下来，就可以使用Vue CLI来创建Vue项目了。

创建第一个Vue项目

通过Vue CLI创建新项目

创建Vue项目的基本步骤如下：

  1. 打开命令行工具（如Windows的CMD或PowerShell，Mac和Linux的终端）。
  2. 进入你希望创建项目的目录，例如：
cd path/to/your/project
  1. 执行命令vue create来创建新项目，例如创建一个名为my-vue-app的项目：
vue create my-vue-app

  1. Vue CLI会询问你是否使用预设配置，按默认配置（即预设配置）创建项目，按回车键即可。

  2. 等待几秒钟后，项目创建完毕，返回命令行后会给出如下提示：
Success! Created my-vue-app at D:\path\to\your\project\my-vue-app
  1. 进入项目目录：
cd my-vue-app
  1. 安装依赖：
npm install
  1. 启动开发服务器：
npm run serve

这样就完成了Vue项目的创建和初始化，现在可以在浏览器中访问http://localhost:8080/来查看项目。

项目结构介绍

一个通过Vue CLI创建的Vue项目通常包含以下主要文件夹和文件：

my-vue-app/
├── node_modules/                    # 所有的依赖包
├── public/                          # 静态资源目录
│   ├── favicon.ico                  # 网站图标
│   └── index.html                   # HTML模板文件
├── src/                             # 源代码目录
│   ├── assets/                      # 比如静态资源文件
│   │   └── logo.png                 # 示例图片
│   ├── components/                  # 可复用的组件
│   │   └── HelloWorld.vue           # 示例组件文件
│   ├── App.vue                      # 主应用组件
│   └── main.js                      # 应用入口文件
├── .browserslistrc                  # 浏览器兼容性配置
├── .editorconfig                    # 编辑器配置文件
├── .eslintrc.js                     # 代码风格规则
├── .gitignore                       # Git忽略文件配置
├── babel.config.js                  # Babel配置文件
├── package.json                     # 项目元数据和依赖配置
├── README.md                        # 项目说明文档
└── vue.config.js                    # Vue CLI配置文件
  • node_modules：存储项目中使用的所有npm包。
  • public：存放项目中静态资源文件，如favicon.ico和index.html。
  • src：存放源代码文件，包括组件、样式、路由、状态管理等文件，以及应用的入口文件main.js。
  • .browserslistrc：用于指定项目的浏览器兼容性。
  • .editorconfig：配置代码编辑器的规则。
  • .eslintrc.js：定义代码风格规则。
  • .gitignore：列出git仓库中要忽略的文件。
  • babel.config.js：配置Babel编译器。
  • package.json：包含项目名称、版本号、依赖项等元数据，以及脚本命令。
  • README.md：介绍项目的基本信息。
  • vue.config.js：配置一些Vue CLI特有的选项。

通过以上结构，可以清晰地看到整个项目的基本布局，有助于后续开发和维护。

常用命令及使用场景

vue create

vue create命令用于创建一个新的Vue项目。它允许你使用预设配置或自定义配置来初始化项目。预设配置中包含了常用的开发设置，例如路由、状态管理、单元测试等。

使用场景

  1. 创建新项目：当你需要开始一个新的Vue项目时，可以通过运行vue create来快速创建。
vue create my-vue-app
  1. 选择预设配置：在创建项目时，可以选择使用预设配置来加快项目初始化。预设配置通常涵盖了基础的开发环境设置，如状态管理、路由、单元测试等。
vue create my-vue-app
  1. 自定义配置：如果你需要在创建项目时自定义一些设置，可以在运行vue create时选择自定义配置，例如选择要安装的预设选项，以及是否使用History模式的路由等。
vue create my-vue-app --preset your-preset-name

vue ui

vue ui命令用于启动Vue CLI的图形用户界面，提供了一个可视化的管理界面来操作项目。这对于不熟悉命令行的开发者来说非常友好，可以更直观地进行开发设置调整。

使用场景

  1. 可视化管理项目：通过vue ui启动图形界面，可以方便地进行项目构建、预览、运行等操作，特别适合初次接触Vue CLI的新手。
vue ui

  1. 配置项目设置：在图形界面中，可以直观地调整项目的构建配置，例如更改输出目录、增加或删除依赖等。

  2. 调试和测试：图形界面提供了详细的构建输出日志，便于调试和查看构建过程中的错误信息。

npm run

npm run命令可以执行项目的脚本任务，结合package.json中定义的脚本命令，可以方便地进行各种开发任务。

使用场景

  1. 开发服务器启动：在开发过程中，使用npm run serve命令来启动开发服务器，实时预览和调试应用。
npm run serve
  1. 构建项目：当项目开发完毕后，可以使用npm run build来构建项目，生成部署用的生产文件。
npm run build
  1. 运行测试：如果项目中有测试代码，可以使用npm run test来运行测试。
npm run test

通过这些命令，可以高效地管理和操作Vue项目，提高开发效率。

路由管理

安装Vue Router

Vue Router是Vue.js官方提供的用于管理单页面应用（SPA）的路由系统。它使得应用可以根据不同的URL展示不同的视图，从而形成单页面应用的基本结构。

  1. 安装Vue Router：
npm install vue-router

安装完成后，可以在项目中引入和使用Vue Router。

路由的基本配置

  1. 创建路由配置文件：
    • 在项目目录中创建一个名为router的文件夹，然后在该文件夹内新建一个名为index.js的文件，作为路由配置文件。
// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})
  1. 引入路由并使用：
    • 在main.js文件中引入路由配置，并将其挂载到Vue根实例上。
// src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
  1. 使用动态路由：
    • 在组件中使用<router-link>标签来创建链接，使用<router-view>来展示组件。
<!-- src/App.vue -->
<template>
  <div id="app">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

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

路由模式

Vue Router支持两种路由模式：hash模式和history模式。

  • Hash模式：使用#作为路由分隔符，路径形式为/#/path。这种方式不受服务器控制，适合所有环境。
  • History模式：使用标准的URL形式，路径形式为/path，需要服务器配置支持。这种方式更优雅，但需要服务器配合才能实现。

在配置文件中可以通过设置mode属性来切换路由模式。

// src/router/index.js
export default new Router({
  mode: 'history', // 或者 'hash'
  routes: [
    // 路由配置
  ]
})

组件代码示例

// src/views/Home.vue
<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>
``

```javascript
// src/views/About.vue
<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

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

通过以上步骤，已经成功配置了基本的路由功能，可以在不同路径下显示不同的页面组件。

资源打包与部署

构建项目

在开发完成后，我们需要将项目构建为一个可以部署到生产环境的版本。构建过程会生成优化后的静态资源文件，例如压缩的JavaScript和CSS文件，以及优化后的HTML模板。

  1. 构建项目：
    • 在命令行中运行npm run build命令来构建项目。
npm run build

执行上述命令后，构建过程会自动执行，并在dist目录下生成所有必要的文件。这些文件可以用于部署到生产环境。

打包文件介绍

构建完成后，项目目录中会生成一个dist文件夹，里面包含了构建生成的所有静态文件，具体如下：

dist/
├── index.html                       # 生成的HTML文件
├── main.js                          # 生成的JavaScript文件
├── main.js.LICENSE.txt              # JavaScript文件的许可证
├── manifest.json                    # Web应用清单文件
├── assets                            # 优化后的静态资源文件夹
    └── logo.png                      # 优化后的图片文件
└── css                               # 生成的CSS文件
    └── app.*.css                     # 生成的样式文件

这些文件已经包含了所有必要的资源，可以直接部署到服务器上。

部署到服务器

部署到服务器的过程主要包括将构建生成的静态文件上传到服务器相应位置，然后配置服务器运行这些文件。以下是部署到服务器的基本步骤：

  1. 上传文件：

    • 使用FTP、SCP、SFTP等工具将dist文件夹中的所有文件上传到服务器的Web根目录。

  2. 配置服务器：

    • 如果是部署到Apache服务器，需要确保服务器配置正确，支持HTML、CSS、JavaScript等文件。
    • 对于Nginx服务器，需要在Nginx的配置文件中指定根目录位置。

  3. 环境配置：

    • 根据服务器环境进行必要的配置，如设置文件权限、防火墙规则等。
  4. 启动服务：
    • 启动Web服务器，确保所有静态文件都能正确加载。

实例

假设我们已经将构建生成的文件上传到服务器的/var/www/html/my-vue-app目录，以下是Nginx的配置示例：

server {
    listen 80;
    server_name yourdomain.com;

    root /var/www/html/my-vue-app;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # 其他配置...
}

通过以上配置，Nginx将会在访问yourdomain.com时提供构建好的Vue应用。确保服务器防火墙允许HTTP流量，然后重启Nginx服务：

sudo systemctl restart nginx

这样，Vue应用就可以通过http://yourdomain.com/访问了。

点击查看更多内容
发表于 2024.10.15 18:42， 共 84 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

元芳怎么了

手记
篇
粉丝
5
获赞与收藏
21

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消