Javascript

Vue CLI学习入门:从零开始搭建你的第一个Vue项目

本文主要是介绍Vue CLI学习入门:从零开始搭建你的第一个Vue项目,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
概述

Vue CLI是Vue.js官方提供的脚手架工具,帮助开发者快速搭建Vue应用,内置多种常用工具和插件,提高开发效率。本文将详细介绍Vue CLI学习入门的相关内容,包括安装、创建项目、路由配置和资源管理等。

Vue CLI简介

Vue CLI是什么

Vue CLI是Vue.js官方提供的脚手架工具,它可以帮助开发者快速搭建Vue应用。通过Vue CLI,你可以轻松创建基于Vue的应用原型,它内置了各种常用的工具和插件,使得开发效率大大提高。Vue CLI不仅支持ES2015+语法,还集成了模块化打包、热重载、单元测试等功能,使得前后端开发更为便捷。

Vue CLI的作用和优势

  1. 快速启动项目:Vue CLI提供了多种模板,可以一键创建适合的项目结构,节省了大量的配置时间。
  2. 灵活的构建选项:Vue CLI允许开发者按照自己的需求调整构建配置,支持多种插件和工具的集成。
  3. 热重载功能:开发过程中,代码修改即时在浏览器中反映,提高了开发效率。
  4. 开发和生产环境的自动切换:Vue CLI内置了环境变量配置,可以方便地切换开发和生产环境。
  5. 自动化单元测试:Vue CLI集成了Jest等测试框架,使得单元测试变得简单直接。

如何安装Vue CLI

  1. 安装Node.js:Vue CLI依赖于Node.js环境,首先确保你的电脑上已经安装了Node.js。可以通过Node.js官网(https://nodejs.org/)下载安装。
  2. 全局安装Vue CLI:使用npm命令安装Vue CLI到全局环境中。

    npm install -g @vue/cli
  3. 验证安装:安装完成后,可以通过以下命令验证Vue CLI是否安装成功。

    vue --version

    输出版本号即表示安装成功。

创建第一个Vue项目

使用Vue CLI创建新项目

  1. 创建新项目:使用vue create命令创建一个新项目。以“my-vue-app”为例。

    vue create my-vue-app
  2. 选择预设模板或功能列表:运行上述命令后,会弹出如下选项:

    ? Please pick a preset (Use arrow keys)
    > default (babel, eslint)
     default (Vue Router, pinia, ESLint, prettier)
     manual (customize features)

    选择一个预设(preset),或者选择“manual”来手动配置你的项目。

  3. 选择配置:如果选择“manual”,会依次询问你是否需要使用特定的功能。例如:

    Use history mode for router? (Use arrow keys)
    > No
     Yes

    按照提示选择需要的功能,最后会生成一个基本的项目结构。

项目目录结构解析

项目创建完成后,项目文件夹结构大致如下:

my-vue-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
│   └── router.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js
  • node_modules/:存放项目依赖的模块。
  • public/:存放静态资源文件,如index.htmlfavicon.ico
  • src/:存放项目的源代码文件。
  • .gitignore:控制git忽略哪些文件。
  • babel.config.js:项目配置文件,用于设置转译规则。
  • package.json:包含项目配置和依赖信息。
  • README.md:项目说明文件。
  • vue.config.js:Vue CLI的配置文件,用于自定义构建过程的设置。

启动开发服务器

  1. 启动开发服务器:在项目根目录下,执行以下命令启动开发服务器。

    npm run serve
  2. 查看开发服务器:启动后,浏览器会自动打开或可以根据提示输入URL访问。

    Local: http://localhost:8080/
    Network: http://192.168.1.100:8080/
  3. 使用热重载功能:在开发过程中,修改代码后浏览器会自动刷新,无需手动刷新页面。
常用命令介绍

vue create命令详解

vue create命令用于创建一个新的Vue项目。命令基本使用如下:

vue create <project-name>

该命令会根据指定项目名称创建一个新项目。通过运行命令,会自动创建项目的基本文件夹和文件结构,同时安装项目依赖库,并初始化Git仓库。

npm run serve命令详解

npm run serve命令用于启动开发服务器。启动后,可以在浏览器中查看项目的实时预览,支持热重载功能,提高开发效率。

vue eject命令详解及其注意事项

vue eject命令是Vue CLI中的一个高级命令,用于删除项目的配置文件并将其暴露给开发者。使用该命令后,Vue CLI将生成大量配置文件,开发者可以自行修改这些配置文件来精确控制构建过程。

  1. 使用命令

    vue eject
  2. 注意事项
    • 使用vue eject命令后,原本由Vue CLI管理的配置将转移到开发者手中,这会增加维护复杂性。
    • 一旦使用vue eject,你将失去快速更新Vue CLI版本中自带的配置和功能的能力。
    • 该命令不可逆,因此在团队开发环境中需要谨慎使用。
组件开发基础

Vue组件的基本概念

Vue组件是Vue应用中的可重用的HTML代码片段。它可以帮助你将UI拆分为独立且可管理的小块,便于代码管理和复用。组件可以包含HTML模板、Vue实例选项等。

创建和使用Vue组件

  1. 创建组件:在src/components目录下创建一个名为HelloWorld.vue的文件。

    <!-- HelloWorld.vue -->
    <template>
     <div class="hello">
       <h1>欢迎使用Vue组件!</h1>
       <p v-if="isVisible">这是一个可重用的Vue组件</p>
     </div>
    </template>
    
    <script>
    export default {
     name: 'HelloWorld',
     data() {
       return {
         isVisible: true
       }
     }
    }
    </script>
    
    <style scoped>
    .hello {
     color: #333;
    }
    </style>
  2. 使用组件:在src/App.vue文件中引入并使用组件。

    <!-- App.vue -->
    <template>
     <div id="app">
       <HelloWorld />
     </div>
    </template>
    
    <script>
    import HelloWorld from './components/HelloWorld.vue'
    
    export default {
     name: 'App',
     components: {
       HelloWorld
     }
    }
    </script>

组件间的传值和通信

  1. 父组件传值给子组件:在父组件中通过props给子组件传递数据。

    <!-- ParentComponent.vue -->
    <template>
     <div>
       <ChildComponent :message="parentMessage" />
     </div>
    </template>
    
    <script>
    import ChildComponent from "./ChildComponent.vue"
    
    export default {
     name: "ParentComponent",
     components: {
       ChildComponent
     },
     data() {
       return {
         parentMessage: "这是从父组件传来的消息"
       }
     }
    }
    </script>
  2. 子组件传值给父组件:通过自定义事件实现子组件向父组件传递数据。

    <!-- ChildComponent.vue -->
    <template>
     <div>
       <button @click="sendMessageToParent">点击发送消息</button>
     </div>
    </template>
    
    <script>
    export default {
     name: "ChildComponent",
     methods: {
       sendMessageToParent() {
         this.$emit("custom-event", "这是从子组件传来的消息")
       }
     }
    }
    </script>
  3. 使用自定义事件:在父组件中监听自定义事件。

    <!-- ParentComponent.vue -->
    <template>
     <div>
       <ChildComponent @custom-event="handleMessage" />
     </div>
    </template>
    
    <script>
    import ChildComponent from "./ChildComponent.vue"
    
    export default {
     name: "ParentComponent",
     components: {
       ChildComponent
     },
     methods: {
       handleMessage(message) {
         console.log("收到的消息:", message)
       }
     }
    }
    </script>
路由配置入门

Vue Router的引入与配置

  1. 安装Vue Router:首先需要安装Vue Router模块。

    npm install vue-router
  2. 配置路由:在src/router.js中进行路由配置。

    // src/router.js
    import { createRouter, createWebHistory } from 'vue-router'
    import Home from './views/Home.vue'
    import About from './views/About.vue'
    
    const routes = [
     {
       path: '/',
       name: 'Home',
       component: Home
     },
     {
       path: '/about',
       name: 'About',
       component: About
     }
    ]
    
    const router = createRouter({
     history: createWebHistory(),
     routes
    })
    
    export default router
  3. 在主文件中使用路由:在main.js中引入并使用配置好的路由。

    // src/main.js
    import { createApp } from 'vue'
    import App from './App.vue'
    import router from './router'
    
    createApp(App).use(router).mount('#app')

创建路由和路由跳转

  1. 创建路由组件:在src/views/目录下创建路由对应的组件文件。

    <!-- Home.vue -->
    <template>
     <div>
       <h1>首页</h1>
     </div>
    </template>
    
    <script>
    export default {
     name: 'Home'
    }
    </script>
  2. 导航到不同路由:在组件中使用<router-link>标签进行路由跳转。

    <!-- App.vue -->
    <template>
     <div id="app">
       <router-link to="/">首页</router-link>
       <router-link to="/about">关于</router-link>
       <router-view />
     </div>
    </template>

路由参数和查询参数的使用

  1. 路由参数:在路由定义中使用动态参数。

    const routes = [
     {
       path: '/user/:id',
       name: 'User',
       component: User
     }
    ]

    在组件中获取路径参数:

    // User.vue
    <script>
    export default {
     name: 'User',
     props: ['id'],
     created() {
       console.log(this.$route.params.id)
     }
    }
    </script>
  2. 查询参数:使用$router.push方法传递查询参数。

    this.$router.push({
     path: '/user',
     query: {
       id: 123
     }
    })

    在组件中获取查询参数:

    // User.vue
    <script>
    export default {
     name: 'User',
     created() {
       console.log(this.$route.query.id)
     }
    }
    </script>
资源添加与样式管理

在Vue项目中添加静态资源

  1. 添加图片资源:将图片文件放入src/assets目录。

    src/
    └── assets/
       └── logo.png
  2. 引用静态资源:在组件中引用资源文件。

    <!-- App.vue -->
    <template>
     <div id="app">
       <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@/assets/logo.png" alt="Logo" />
     </div>
    </template>

使用CSS预处理器(如Sass、Less)

  1. 安装Sass或Less:使用npm安装Sass或Less及其相应编译器。

    npm install sass @vue/cli-plugin-sass
    npm install less @vue/cli-plugin-less
  2. 编写Sass或Less文件:在src/assets目录下创建一个Sass或Less文件。

    /* src/assets/style.scss */
    .container {
     padding: 20px;
     background-color: #f0f0f0;
    }
  3. 引入Sass或Less文件:在组件中引用并使用这个样式文件。

    <!-- App.vue -->
    <template>
     <div id="app" class="container">
       <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@/assets/logo.png" alt="Logo" />
     </div>
    </template>
    
    <script>
    export default {
     name: 'App'
    }
    </script>
    
    <style scoped>
    @import '@/assets/style.scss';
    </style>

引入和使用外部样式库(如Bootstrap)

  1. 安装Bootstrap:通过npm安装Bootstrap。

    npm install bootstrap
  2. 引入Bootstrap:在src/main.js中引入Bootstrap的CSS和JS文件。

    // src/main.js
    import 'bootstrap/dist/css/bootstrap.css'
    import 'bootstrap/dist/js/bootstrap.bundle.js'
    
    import { createApp } from 'vue'
    import App from './App.vue'
    
    createApp(App).use(router).mount('#app')
  3. 使用Bootstrap组件:在组件中使用Bootstrap的HTML标签和类名。

    <!-- App.vue -->
    <template>
     <div id="app" class="container">
       <h1 class="text-primary">欢迎使用Bootstrap!</h1>
       <button class="btn btn-primary">点击按钮</button>
     </div>
    </template>
    
    <script>
    export default {
     name: 'App'
    }
    </script>

通过以上步骤,你已经成功搭建了一个基本的Vue项目,并掌握了Vue CLI的基本使用方法,也学会了如何管理项目中的资源和样式。如果你想要深入了解Vue的更多高级功能,可以继续阅读官方文档或参加慕课网(https://www.imooc.com/)的相关课程。

这篇关于Vue CLI学习入门:从零开始搭建你的第一个Vue项目的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!