首页手记 Vue-Cli学习：入门到实践的完整指南

Vue-Cli学习：入门到实践的完整指南

标签：

前端工具 Vue.js

概述

本文将详细介绍 Vue-Cli 的安装步骤、常用命令以及如何使用 Vue-Cli 进行路由配置和资源管理。通过本文的学习，读者将能够快速搭建 Vue.js 项目，并掌握项目管理和优化的相关技巧。

Vue-Cli简介与安装

什么是Vue-Cli

Vue.js 是一个用于构建用户界面的渐进式框架，而 Vue-Cli（Vue Command Line Interface）则是官方提供的脚手架工具，它可以帮助我们快速搭建 Vue.js 项目，简化开发流程，如创建项目、构建项目、运行项目等。Vue-Cli 还提供了丰富的插件支持，可以方便地集成各种开发工具和库。

Vue-Cli的安装步骤

1. 安装Node.js

确保计算机上已安装 Node.js，这是运行 Vue-Cli 的前提条件。可以通过官方网站下载最新版本的 Node.js 并安装，安装完成后，可以在命令行中输入以下命令来验证 Node.js 是否安装成功：

$ node -v

输出版本号说明 Node.js 已正确安装。

2. 安装Vue-Cli

在确保 Node.js 已安装的前提下，可以使用 npm（Node Package Manager）来全局安装 Vue-Cli：

$ npm install -g @vue/cli

安装完成后，可以通过以下命令来验证 Vue-Cli 是否安装成功：

$ vue --version

输出 Vue-Cli 的版本号表示安装成功。

常用命令介绍

vue init

使用 vue init 命令可以基于模板创建一个新的 Vue.js 项目，模板可以是官方提供的，也可以是第三方提供的。例如，使用默认的 Vue.js 模板创建新项目：

$ vue init webpack my-project

这里 webpack 是模板名称，my-project 是项目名称。

vue create

vue create 是一个新的命令，可以基于 Vue 3 创建新项目，推荐使用此命令：

$ vue create my-project

这里 my-project 是项目名称。

vue serve

vue serve 命令可用于启动开发服务器，用于开发和测试：

$ vue serve

这个命令需要在项目根目录下执行。

vue build

vue build 命令用于构建项目，生成生产环境需要的文件：

$ vue build

这个命令同样需要在项目根目录下执行。

快速搭建Vue项目

新建Vue项目的基本步骤

安装 Vue-Cli（若未安装）：
```
$ npm install -g @vue/cli
```
使用 vue create 命令创建新项目：
```
$ vue create my-project
```
进入项目目录：
```
$ cd my-project
```
启动开发服务器：
```
$ npm run serve
```

项目结构解析

在使用 vue create 命令创建项目后，会生成一个标准的 Vue 项目结构：

my-project/
├── node_modules/
├── public/
│   ├── index.html
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   └── main.js
├── .browserslistrc
├── babel.config.js
├── package.json
├── README.md
└── yarn.lock

node_modules：存放项目依赖的模块。
public：存放静态文件，如 index.html。
src：存放项目源代码。
- assets：存放项目中的静态资源，如图片。
- components：存放 Vue 组件。
- App.vue：根组件。
- main.js：项目入口文件。
.browserslistrc：配置浏览器支持的版本。
babel.config.js：配置 Babel 编译器。
package.json：存储项目信息及依赖。
README.md：项目说明文件。
yarn.lock：记录项目依赖版本的锁定文件。

配置文件详解

package.json

package.json 文件用于描述项目的基本信息和依赖关系：

{
  "name": "my-project",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "vue-template-compiler": "^2.6.11"
  }
}

name：项目名称。
version：项目版本号。
scripts：定义了一些脚本命令，如 serve 和 build。
dependencies：项目运行时依赖的库。
devDependencies：项目开发时依赖的库。

.browserslistrc

.browserslistrc 文件用于指定浏览器版本的支持范围：

last 2 versions
> 1%
not dead

last 2 versions：支持最新两个版本的浏览器。
> 1%：支持全球范围内超过 1% 的用户使用的浏览器版本。
not dead：排除已废弃的浏览器。

babel.config.js

babel.config.js 文件用于配置 Babel 编译器：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

presets：预设配置，@vue/cli-plugin-babel/preset 用于编译 Vue 项目。

使用Vue-Cli进行路由配置

Vue Router的基本概念

Vue Router 是 Vue.js 官方提供的用于实现路由功能的插件。它允许我们在单页面应用 (SPA) 中定义多个视图，并通过不同的 URL 来切换这些视图。通过 Vue Router，我们可以实现页面的动态加载和跳转，从而构建出复杂的 SPA。

路由的配置与使用

安装Vue Router

首先需要在项目中安装 Vue Router：

$ npm install vue-router

基本配置

在项目中创建一个 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({
  mode: 'history', // 使用 HTML5 History 模式
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

路由的使用

在 main.js 文件中引入并使用路由配置：

// src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

在组件中使用 router 时，可以通过 <router-link> 标签来创建链接，并使用 <router-view> 标签来渲染当前路由对应的组件：

<!-- src/App.vue -->
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>

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

路由的动态参数与守卫

动态参数

可以通过路由参数来传递动态数据。例如，在路由中定义一个 user 路由：

// src/router/index.js
{
  path: '/user/:id',
  name: 'user',
  component: User
}

在组件中通过 this.$route.params.id 获取传入的参数：

// src/views/User.vue
export default {
  name: "User",
  created() {
    console.log(this.$route.params.id);
  }
}

守卫

路由守卫用于在导航过程中执行一些操作。常见的有三种类型的守卫：

导航守卫（全局）

在全局范围内的导航过程中可以使用 router.beforeEach 和 router.afterEach：

// src/router/index.js
router.beforeEach((to, from, next) => {
 console.log(`from ${from.name} to ${to.name}`);
 next();
});
router.afterEach((to, from) => {
 console.log(`Navigated from ${from.name} to ${to.name}`);
});

导航守卫（路由级别）

在特定路由的导航过程中可以使用 router.beforeEnter：

// src/router/index.js
router.beforeEach((to, from, next) => {
 if (to.path === '/protected') {
   console.log('Accessing protected route');
   next();
 } else {
   next();
 }
});

组件内守卫

可以在组件内定义导航守卫，如 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave：

// src/views/Home.vue
export default {
 name: "Home",
 beforeRouteEnter(to, from, next) {
   console.log('Entering Home page');
   next();
 },
 beforeRouteUpdate(to, from, next) {
   console.log('Route updated');
   next();
 },
 beforeRouteLeave(to, from, next) {
   console.log('Leaving Home page');
   next();
 }
};

资源管理和项目优化

静态资源的管理

静态资源包括图片、字体文件、样式表等。在 Vue 项目中，这些资源通常放在 src/assets 目录下，并通过 require 或 import 来引用。

例如，在 Vue 组件中引用一张图片：

<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@/assets/logo.png" alt="Vue logo">

或者在 JavaScript 中引用字体文件：

import fontAwesome from '@/assets/fontawesome.min.css';

代码分割与懒加载

代码分割是将应用程序拆分成多个小块，每个小块既可以独立加载也可以并行加载，从而提高应用的加载速度和性能。

在 Vue Router 中可以使用懒加载来实现代码分割：

// src/router/index.js
{
  path: '/profile',
  name: 'profile',
  component: () => import('@/views/Profile.vue')
}

这样，在访问 /profile 路由时才会加载 Profile.vue 组件及其相关依赖。

项目环境的配置与构建

环境变量

可以使用环境变量来区分不同的环境（如开发、测试、生产）。环境变量通常定义在 .env 文件中：

创建 .env 文件（例如 .env.development 和 .env.production）并定义环境变量：

# .env.development
VUE_APP_API_URL=http://localhost:3000/api

# .env.production
VUE_APP_API_URL=https://api.example.com

在代码中访问这些环境变量：

console.log(process.env.VUE_APP_API_URL);

构建优化

通过配置 vue.config.js 文件进行构建优化：

// vue.config.js
module.exports = {
  outputDir: 'dist',
  assetsDir: 'static',
  productionSourceMap: false,
  chainWebpack: config => {
    config.optimization.splitChunks({
      chunks: 'all',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    });
  }
};

代码压缩

在生产环境下启用代码压缩：

// vue.config.js
module.exports = {
  productionSourceMap: false,
  configureWebpack: {
    optimization: {
      minimize: true
    }
  }
};

常见问题及解决办法

常见的错误提示及其原因

404 Not Found
- 原因：文件路径错误。
- 解决办法：检查文件路径是否正确，确保文件存在。
Cannot find module
- 原因：文件或模块未正确导入。
- 解决办法：检查 import 或 require 语句是否正确，确保文件存在并路径正确。
Uncaught SyntaxError
- 原因：JavaScript 代码语法错误。
- 解决办法：检查 JavaScript 代码，使用代码编辑器的语法检查功能。
Cannot read property 'xxx' of undefined
- 原因：尝试访问未定义的属性。
- 解决办法：确保对象或属性已正确初始化。

快速定位和解决错误的方法

使用开发者工具

使用浏览器的开发者工具（如 Chrome DevTools）可以帮助快速定位和解决前端代码问题。
日志输出

在代码中增加日志输出，可以帮助跟踪代码执行流程，找到问题所在：
```
console.log('function executed');
```
断点调试

在代码中设置断点进行调试，可以更细粒度地查看变量和执行流程：
```
debugger;
```
错误示例与解决步骤

例如，如果遇到一个常见的错误 TypeError: Cannot read property 'user' of undefined，可以通过以下步骤解决：
- 检查 this.user 是否已正确初始化。
- 使用 console.log(this.user) 输出 this.user 的值，确保其存在。
- 检查是否在生命周期钩子中正确赋值。

构建和运行时的注意事项

环境变量

确保 .env 文件中的环境变量设置正确，特别是在生产环境中。
依赖版本

确保所有依赖的版本一致，特别是在团队开发中，避免因版本不一致导致的问题。
代码规范

遵循统一的代码规范，有助于维护代码的一致性和可读性。

实践案例与进阶技巧

实战项目分享

这里以一个简单的待办事项列表应用为例，展示如何使用 Vue-Cli 创建和开发一个实际项目。

项目结构

my-todo-app/
├── node_modules/
├── public/
│   ├── index.html
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   ├── TodoItem.vue
│   │   └── TodoList.vue
│   ├── App.vue
│   └── main.js
├── .browserslistrc
├── babel.config.js
├── package.json
├── README.md
└── yarn.lock

TodoItem.vue

<!-- src/components/TodoItem.vue -->
<template>
  <div class="todo-item">
    <input type="checkbox" v-model="checked" />
    <span :class="{ completed: checked }">{{ todo.text }}</span>
  </div>
</template>

<script>
export default {
  props: ['todo'],
  data() {
    return {
      checked: false
    };
  },
  watch: {
    checked(newVal) {
      this.$emit('update-todo', this.todo);
    }
  }
};
</script>

<style scoped>
.todo-item {
  display: flex;
  align-items: center;
}
.todo-item .completed {
  text-decoration: line-through;
}
</style>

TodoList.vue

<!-- src/components/TodoList.vue -->
<template>
  <div class="todo-list">
    <div v-for="todo in todos" :key="todo.id">
      <TodoItem :todo="todo" @update-todo="updateTodo" />
    </div>
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue';

export default {
  components: {
    TodoItem
  },
  props: ['todos'],
  methods: {
    updateTodo(todo) {
      this.$emit('update-todos', todo);
    }
  }
};
</script>

<style scoped>
.todo-list {
  list-style-type: none;
  padding: 0;
}
</style>

App.vue

<!-- src/App.vue -->
<template>
  <div id="app">
    <TodoList :todos="todos" @update-todos="updateTodos" />
  </div>
</template>

<script>
import TodoList from './components/TodoList.vue';

export default {
  components: {
    TodoList
  },
  data() {
    return {
      todos: [
        { id: 1, text: 'Learn Vue Router', checked: false },
        { id: 2, text: 'Build a Todo App', checked: false }
      ]
    };
  },
  methods: {
    updateTodos(todo) {
      const index = this.todos.findIndex(t => t.id === todo.id);
      if (index > -1) {
        this.todos.splice(index, 1, todo);
      }
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

main.js

// src/main.js
import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App)
}).$mount('#app');

package.json

{
  "name": "my-todo-app",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-service": "~4.5.0"
  }
}

开发时实用的小技巧

使用Vuex

Vuex 是 Vue.js 的状态管理库，适用于大型应用。它可以帮助管理复杂的状态，简化状态更新逻辑。在组件中通过 this.$store 访问 Vuex 状态：
```
import { mapState, mapActions } from 'vuex';

export default {
 computed: {
   ...mapState(['todos'])
 },
 methods: {
   ...mapActions(['updateTodo'])
 }
};
```
使用Vue Devtools

Vue Devtools 是一个 Chrome 插件，可以方便查看 Vue 组件的层次结构、状态、内部变量等，有助于开发和调试。
使用Lint工具

配置 ESLint 或 Prettier 等代码规范工具，确保代码风格一致，提高代码质量。

如何更好地使用Vue-Cli进行团队开发

约定大于配置

遵循 Vue-Cli 提供的约定开发，减少配置工作，提高开发效率。
使用版本控制系统

使用 Git 等版本控制系统管理代码，确保代码版本的可回溯性。
代码审查

实施代码审查流程，确保代码质量和团队协作。
模块化开发

采用模块化开发，将应用拆分为多个可独立开发和测试的模块，提高代码的可维护性。
环境隔离

使用不同的环境变量和配置文件，确保开发、测试和生产环境的隔离。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

回首忆惘然

手记
篇

粉丝

74

获赞与收藏

413

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30589 343

网络编程入门教程

20个小节 12562 237

Pandas 入门教程

25个小节 18499 337

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Vue-Cli学习：入门到实践的完整指南

什么是Vue-Cli

Vue-Cli的安装步骤

1. 安装Node.js

2. 安装Vue-Cli

常用命令介绍

vue init

vue create

vue serve

vue build

快速搭建Vue项目

新建Vue项目的基本步骤

项目结构解析

配置文件详解

package.json

.browserslistrc

babel.config.js

Vue Router的基本概念

路由的配置与使用

安装Vue Router

基本配置

路由的使用

路由的动态参数与守卫

动态参数

守卫

静态资源的管理

代码分割与懒加载

项目环境的配置与构建

环境变量

构建优化

代码压缩

常见的错误提示及其原因

快速定位和解决错误的方法

构建和运行时的注意事项

实战项目分享

项目结构

TodoItem.vue

TodoList.vue

App.vue

main.js

package.json

开发时实用的小技巧

如何更好地使用Vue-Cli进行团队开发

阅读免费教程