首页手记 Vue项目实战：新手入门与初级开发者指南

Vue项目实战：新手入门与初级开发者指南

标签：

前端工具 Vue.js

概述

本文提供了Vue项目实战的全面指南，从环境搭建到组件开发，详细介绍了Vue的基础用法和高级特性。文章还涵盖了路由配置、状态管理以及项目部署与优化的技巧。适合新手入门与初级开发者学习Vue项目实战。

Vue项目实战：新手入门与初级开发者指南

Vue简介与环境搭建

什么是Vue

Vue.js 是一个渐进式的 JavaScript 框架，用于构建用户界面。其核心库只关注视图层，易于上手，同时也提供了丰富的生态体系，使得构建单页面应用更加高效。Vue 的目标是通过尽可能简单的 API 实现响应式的视图，让开发者无需学习复杂的框架也能快速上手，随着应用需求的增长，可以方便地采用相应模式和工具。

安装Node.js和npm

在开始使用 Vue 之前，你需要确保已经安装了 Node.js 和 npm（Node 包管理器）。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，可以构建服务器端和客户端应用。npm 是 Node.js 的包管理工具，用来安装和管理 Node.js 的包。

步骤1：下载 Node.js 和 npm

访问 Node.js 的官方下载页面 https://nodejs.org/download/release/latest/ ，并下载适合你操作系统的安装包。

步骤2：安装 Node.js 和 npm

双击下载的安装包，按照安装向导完成 Node.js 和 npm 的安装。安装完成后，可以在命令行中输入以下命令检查安装是否成功：

node -v
npm -v

这两个命令将分别打印 Node.js 和 npm 的版本号。如果看到版本号，说明安装成功。

创建Vue项目

使用 Vue CLI（Vue Command Line Interface）可以很容易地创建新的 Vue 项目。Vue CLI 提供了一套预设的脚手架工具，可以快速生成 Vue 项目的基础结构。Vue CLI 的最新版本为 Vue CLI 5（也被称为 @vue/cli 5），提供了多种项目模板和构建工具选项，支持现代化的前端开发工作流程。

步骤1：安装 Vue CLI

在命令行中输入以下命令全局安装 Vue CLI：

npm install -g @vue/cli

步骤2：创建新项目

创建新项目时，Vue CLI 提供了多种预设配置选项，如选择使用 Vue.js 2 还是 3，是否使用单页面应用，是否使用 TypeScript 等。这里我们选择一个基础的 Vue.js 项目模板。

vue create my-vue-project

这个命令会询问你想要使用哪些预设配置。选择默认的配置或者根据提示选择适合你的配置选项。

步骤3：进入项目目录

在命令行中输入以下命令进入你刚刚创建的项目目录：

cd my-vue-project

步骤4：运行项目

在项目目录下，输入以下命令启动开发服务器：

npm run serve

这将启动一个开发服务器，你可以在浏览器中访问 http://localhost:8080 查看你的 Vue 项目。

项目实例展示

在 my-vue-project 目录中会生成一个简单的 Vue 项目结构，其中包含以下核心文件：

main.js:

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

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

App.vue:

<template>
<div id="app">
  Hello, Vue!
</div>
</template>

<script>
export default {
name: 'App'
};
</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>

Vue基础组件开发

模板语法

Vue 的模板语法是基于 HTML 的，允许开发者使用简单的语法来声明性地创建带有数据绑定的视图。主要的数据绑定形式有插值表达式、指令和事件处理器。

插值表达式 使用 {{ }} 标签在 HTML 中插入变量。
```
<div id="app">
{{ message }}
</div>
```
对应的 Vue 实例中应有 message 属性：
```
new Vue({
el: '#app',
data: {
  message: 'Hello Vue!'
}
})
```

指令是以 v- 开头的特殊属性，用来直接操作 DOM。例如 v-bind 用来绑定元素属性，v-model 用来实现表单元素双向数据绑定。

<div id="app">
<img v-bind:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="imgUrl" />
</div>

对应的 Vue 实例中应有 imgUrl 属性：

new Vue({
el: '#app',
data: {
  imgUrl: 'https://example.com/avatar.jpg'
}
})

事件处理器 用来监听用户的输入，例如 v-on:click：

<div id="app">
<button v-on:click="sayHello">Say Hello</button>
</div>

对应的 Vue 实例中应有 sayHello 方法：

new Vue({
el: '#app',
methods: {
  sayHello() {
    alert('Hello!');
  }
}
})

数据绑定

Vue 的数据绑定使开发者能够将 DOM 元素绑定到 Vue 实例的数据属性。当数据发生变化时，Vue 会自动更新绑定的元素。

插值表达式 已经在上一小节中提到，这里不再重复。
v-model 指令实现表单元素的双向绑定，当输入框的变化会自动更新 Vue 实例中的相应数据属性，反之亦然。
```
<div id="app">
<input v-model="message" />
<p>{{ message }}</p>
</div>
```
对应的 Vue 实例中应有 message 属性：
```
new Vue({
el: '#app',
data: {
  message: ''
}
})
```

事件处理

Vue 提供了多种事件处理指令，如 v-on:click、v-on:keyup 等，用于监听用户输入和 DOM 事件。

v-on:click

<div id="app">
<button v-on:click="increment">Increment</button>
<p>{{ count }}</p>
</div>

对应的 Vue 实例中应有 count 属性和 increment 方法：

new Vue({
el: '#app',
data: {
  count: 0
},
methods: {
  increment() {
    this.count++;
  }
}
})

v-on:keyup

<div id="app">
<input v-on:keyup.enter="submit" />
</div>

对应的 Vue 实例中应有 submit 方法：

new Vue({
el: '#app',
methods: {
  submit() {
    alert('Form submitted!');
  }
}
})

父子组件通信

props传递数据

在 Vue 中，父组件可以通过 props 向子组件传递数据。props 是子组件接收父组件传递数据的机制。

父组件

<div id="app">
<child-component :message="parentMessage"></child-component>
</div>

对应的 Vue 实例中应有 parentMessage 属性：

new Vue({
el: '#app',
data: {
  parentMessage: 'Hello from Parent'
}
})

子组件

<template id="child-template">
<div>
  {{ message }}
</div>
</template>

对应的 Vue 实例中应有 props：

Vue.component('child-component', {
template: '#child-template',
props: ['message']
})

使用事件监听

当子组件需要与父组件通信时，可以通过 $emit 触发自定义事件，父组件监听这些事件来响应子组件的行为。

子组件

<template id="child-template">
<button v-on:click="sendMessage">Send Message</button>
</template>

对应的 Vue 实例中应有 sendMessage 方法：

Vue.component('child-component', {
template: '#child-template',
methods: {
  sendMessage() {
    this.$emit('custom-event', 'Hello from Child')
  }
}
})

父组件

<div id="app">
<child-component v-on:custom-event="handleMessage"></child-component>
</div>

对应的 Vue 实例中应有 handleMessage 方法：

new Vue({
el: '#app',
methods: {
  handleMessage(message) {
    alert(message);
  }
}
})

高阶组件通信

当组件层级较深时，可以使用 provide 和 inject 来进行跨层次通信。provide 用来提供数据，inject 用来注入数据。

父组件

<div id="app">
<child-component></child-component>
</div>

对应的 Vue 实例中应有 provide：

new Vue({
el: '#app',
provide: {
  message: 'Hello from Parent'
},
components: {
  'child-component': ChildComponent
}
})

子组件

Vue.component('child-component', {
inject: ['message'],
template: '<p>{{ message }}</p>'
})

Vue路由与导航

安装Vue Router

Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用。它提供了丰富的功能，如路由配置、视图切换、导航守卫等。

步骤1：安装 Vue Router

在命令行中输入以下命令安装 Vue Router：

npm install vue-router

步骤2：创建路由配置

在项目中创建一个 router.js 文件，配置路由：

import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});

步骤3：引入路由配置

在主应用文件（如 main.js）中引入并使用路由配置：

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

new Vue({
  el: '#app',
  render: h => h(App),
  router
});

路由配置

在 Vue Router 中，路由配置由 routes 数组定义，每个路由对象包含一个路径 path 和对应的组件 component。

routes: [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
]

路由参数与查询参数

路由参数通过动态路由匹配器 :id 定义，查询参数通过 ?param=value 的形式传递。

动态路由参数

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

在组件中通过 this.$route.params.id 获取路由参数：

export default {
created() {
  console.log(this.$route.params.id);
}
}

查询参数

routes: [
{
  path: '/search',
  name: 'search',
  component: Search
}
]

在组件中通过 this.$route.query 获取查询参数：

export default {
created() {
  console.log(this.$route.query.q);
}
}

项目实例展示

在实际项目中，假设我们有两个组件 Home 和 About，配置如下：

Home.vue:

<template>
<div>
  <h1>Home Page</h1>
</div>
</template>

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

<style scoped>
/* 样式 */
</style>

About.vue:

<template>
<div>
  <h1>About Page</h1>
</div>
</template>

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

<style scoped>
/* 样式 */
</style>

router.js:

import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(Router);

export default new Router({
routes: [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
]
});

main.js:

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

new Vue({
el: '#app',
render: h => h(App),
router
});

Vue状态管理和Vuex

Vuex简介

Vuex 是 Vue.js 的状态管理库，用于在大型单页面应用中管理共享状态。它提供了一套完整的状态管理机制，包括状态存储、状态变更、状态订阅等。

安装与配置Vuex

步骤1：安装 Vuex

在命令行中输入以下命令安装 Vuex：

npm install vuex

步骤2：创建 Vuex Store

在项目中创建一个 store.js 文件，定义 Vuex Store：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit('increment');
    }
  },
  getters: {
    doubledCount(state) {
      return state.count * 2;
    }
  }
});

步骤3：引入 Vuex Store

在主应用文件（如 main.js）中引入并使用 Vuex Store：

import Vue from 'vue';
import App from './App.vue';
import store from './store';

new Vue({
  el: '#app',
  render: h => h(App),
  store
});

使用Store管理状态

在组件中通过 this.$store 访问 Vuex Store 的状态和方法。

状态访问

export default {
computed: {
  count() {
    return this.$store.state.count;
  }
}
}

状态变更

export default {
methods: {
  increment() {
    this.$store.dispatch('increment');
  }
}
}

状态订阅

export default {
created() {
  this.$store.subscribe((mutation, state) => {
    console.log(state.count);
  });
}
}

项目实例展示

假设我们有一个组件 Counter，用来展示和操作 Vuex Store 中的状态：

Counter.vue:

<template>
<div>
  <p>Count: {{ count }}</p>
  <button @click="increment">Increment</button>
</div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
computed: {
  ...mapState(['count'])
},
methods: {
  ...mapActions(['increment'])
}
};
</script>

<style scoped>
/* 样式 */
</style>

Vue项目部署与优化

构建Vue项目

构建 Vue 项目可以使用 Vue CLI 提供的 build 命令或者 Webpack 手动构建。

步骤1：使用 Vue CLI 构建

在命令行中输入以下命令构建项目：

npm run build

这将生成一个 dist 文件夹，包含压缩后的生产版本。

步骤2：使用 Webpack 构建

如果你手动配置了 Webpack，可以通过以下命令构建项目：

npm run build

部署到服务器

将构建后的 dist 文件夹复制到服务器上的指定目录。对于静态文件服务器，如 Nginx 或 Apache，可以直接将文件夹中的文件复制到服务器根目录。

步骤1：上传文件

使用 FTP 或其他工具将 dist 文件夹中的文件上传到服务器。

步骤2：配置服务器

配置服务器以服务这些静态文件。例如，在 Nginx 中，可以使用以下配置：

server {
  listen 80;
  server_name example.com;

  location / {
    alias /path/to/dist;
  }
}

项目性能优化

优化 Vue 项目性能可以采用多种手段，包括静态资源压缩、懒加载、代码分割等。

静态资源压缩

使用 Webpack 插件如 compression-webpack-plugin 压缩静态资源。

const CompressionWebpackPlugin = require('compression-webpack-plugin');

module.exports = {
plugins: [
  new CompressionWebpackPlugin({
    filename: '[path].gz[query]',
    algorithm: 'gzip',
    test: /\.js$|\.css$|\.html$/,
    threshold: 10240,
    minRatio: 0.8
  })
]
};

懒加载

使用 Vue Router 的懒加载功能，按需加载组件。

const Home = () => import('./components/Home.vue');
const About = () => import('./components/About.vue');

export default new Router({
routes: [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
]
});

代码分割

使用 Webpack 的代码分割功能，将代码分割成多个小块，按需加载。

const CompressionWebpackPlugin = require('compression-webpack-plugin');
const webpack = require('webpack');

module.exports = {
plugins: [
  new CompressionWebpackPlugin({
    filename: '[path].gz[query]',
    algorithm: 'gzip',
    test: /\.js$|\.css$|\.html$/,
    threshold: 10240,
    minRatio: 0.8
  }),
  new webpack.optimize.SplitChunksPlugin({
    cacheGroups: {
      vendor: {
        test: /node_modules/,
        chunks: 'initial',
        name: 'vendors',
        enforce: true
      }
    }
  })
]
};

以上是 Vue 项目开发的完整教程，涵盖了从环境搭建、组件开发、路由管理到状态管理、项目部署和优化的各个方面。希望对你有所帮助。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

郎朗坤

手记
篇

粉丝

49

获赞与收藏

213

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30809 345

网络编程入门教程

20个小节 12721 239

Pandas 入门教程

25个小节 18600 342

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空

Vue项目实战：新手入门与初级开发者指南

什么是Vue

安装Node.js和npm

创建Vue项目

项目实例展示

模板语法

数据绑定

事件处理

props传递数据

使用事件监听

高阶组件通信

安装Vue Router

路由配置

路由参数与查询参数

项目实例展示

Vuex简介

安装与配置Vuex

使用Store管理状态

项目实例展示

构建Vue项目

部署到服务器

项目性能优化

阅读免费教程