首页手记 Vue项目实战：从零开始搭建Vue项目

Vue项目实战：从零开始搭建Vue项目

标签：

Vue.js

概述

本文详细介绍了从环境搭建到项目部署的全过程，帮助你掌握Vue项目实战。首先介绍了如何安装Node.js、NPM和Vue CLI，并使用Vue CLI创建Vue项目。接着解析了项目的文件结构，并讲解了基本组件的开发、路由管理和状态管理。最后，文章还介绍了如何构建和打包Vue项目，并将其部署到服务器或云平台。

环境搭建

在开始搭建Vue项目之前，你需要确保本地开发环境已经准备好。首先需要安装Node.js和NPM（Node.js包管理和分发工具），然后安装Vue CLI来创建和管理Vue项目。

安装Node.js和NPM

Node.js是一个基于Chrome V8引擎的JavaScript运行环境，而NPM是Node.js包管理和分发工具，可用于安装和管理JavaScript软件包。

访问Node.js官网下载并安装最新版本的Node.js。
安装完成后，可以通过命令行验证安装是否成功：
```
node -v
npm -v
```
如果安装成功，命令行会显示Node.js和NPM的版本号。

安装Vue CLI

Vue CLI是一个命令行工具，使用它能够快速搭建Vue项目的脚手架。以下是安装步骤：

使用npm全局安装Vue CLI：
```
npm install -g @vue/cli
```
如果需要最新版本的Vue CLI，可以安装@vue/cli@latest。
验证Vue CLI是否安装成功：
```
vue --version
```
成功安装后，命令行会显示Vue CLI的版本号。

创建Vue项目

安装完成后，使用Vue CLI创建一个新的Vue项目。

使用vue create命令创建项目。例如，创建一个名为my-project的Vue项目：
```
vue create my-project
```
运行该命令后，Vue CLI会询问你创建项目的模板选择。这里可以选择默认的脚手架模板，或者根据项目需求选择预设模板。
进入项目目录：
```
cd my-project
```
安装项目依赖：
```
npm install
```
启动开发服务器：
```
npm run serve
```
如果一切正常，浏览器会自动打开并显示一个简单的Vue应用页面。

项目结构解析

创建Vue项目后，你会看到一个新的文件夹和一系列文件，这些构成了Vue项目的最基本的结构。下面对这些文件和文件夹的作用进行详细介绍。

项目文件结构介绍

src - Vue项目的核心文件夹，项目的核心代码都在这里。
- assets - 项目中所有的静态资源文件，包括图片、字体文件等。
- components - Vue组件的存放位置。
- views - 页面组件的存放位置。
- App.vue - Vue项目的根组件，整个应用的起点。
- main.js - 应用程序的入口文件，用于引入Vue实例和注册路由等。
public - 项目中的一些静态文件，如index.html、图片等。这些文件不会被webpack处理，直接由浏览器解释。
- index.html - Vue应用的基本HTML模板。
package.json - 项目的基本配置文件，包括项目的基本信息、依赖包版本信息等。
README.md - 项目的基本介绍和使用说明。
vue.config.js - 项目最基本的配置文件，如端口号、打包路径等。

各文件夹和文件的作用

src/App.vue：App.vue是Vue应用的根组件。它包含了应用的根元素，其他组件都可以通过路由或其他方式挂载到这个元素上。
```
<template>
<div id="app">
  <router-view></router-view>
</div>
</template>

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

src/main.js：这是应用的入口文件，通常在这里实例化Vue应用，并引入必要的模块。例如：

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

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

src/router/index.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

public/index.html：这是应用的HTML入口文件，Vue应用会将根组件渲染到<div id="app"></div>标签上。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue App</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

package.json：项目的基本配置文件，包含了项目的名称、版本、描述等信息，以及项目的依赖信息。

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

vue.config.js：这是Vue的配置文件，可以在此文件中修改项目的运行端口、打包的输出路径等。
```
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/dist/' : '/'
}
```

基本组件开发

在Vue项目中，组件化开发是开发的重要部分。组件可以被复用，方便维护和扩展。下面详细介绍如何创建和使用组件，以及组件如何进行props和事件的传递。

创建和使用Vue组件

在Vue中，组件通常定义在src/components目录下。每个组件都是一个独立的Vue实例，拥有自己的数据、模板和逻辑。下面是一个简单的组件示例：

创建一个组件文件src/components/HelloWorld.vue：

<template>
 <div class="hello">
   <h1>{{ msg }}</h1>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 props: {
   msg: String
 }
}
</script>

<style scoped>
.hello {
 color: #333;
}
</style>

在其他组件或根组件App.vue中使用这个组件：

<template>
 <div id="app">
   <HelloWorld msg="Welcome to Your Vue.js App"/>
 </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

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

组件的props和事件传递

在Vue中，组件可以通过props属性从父组件接收数据，也可以通过自定义事件向父组件发送数据。

在父组件App.vue中添加一个按钮组件，并传递数据给按钮组件：

<template>
 <div id="app">
   <ButtonComponent :msg="parentMsg" @click="handleClick"/>
 </div>
</template>

<script>
import ButtonComponent from './components/ButtonComponent.vue'

export default {
 name: 'App',
 components: {
   ButtonComponent
 },
 data() {
   return {
     parentMsg: 'Hello, Button!'
   }
 },
 methods: {
   handleClick() {
     alert('Button clicked!')
   }
 }
}
</script>

在子组件ButtonComponent.vue中，定义props属性和自定义事件：

<template>
 <button @click="handleClick">{{ msg }}</button>
</template>

<script>
export default {
 name: 'ButtonComponent',
 props: {
   msg: String
 },
 methods: {
   handleClick() {
     this.$emit('click')
   }
 }
}
</script>

路由管理

Vue Router是Vue官方的路由管理器，它提供了丰富的功能来管理Vue应用中的路由。下面详细介绍Vue Router的基本使用和多级路由的实现。

Vue Router的基本使用

安装Vue Router：
```
npm install vue-router@next
```

创建路由配置文件src/router/index.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

在src/main.js中引入并使用Vue Router：

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

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

在src/views/Home.vue和src/views/About.vue中分别定义页面组件。

<!-- Home.vue -->
<template>
 <div>
   <h1>Home Page</h1>
 </div>
</template>

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

<!-- About.vue -->
<template>
 <div>
   <h1>About Page</h1>
 </div>
</template>

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

实现多级路由

多级路由可以通过嵌套路由来实现。在一个路由配置中，可以定义子路由，这些子路由将作为父路由的一部分。

在路由配置文件中定义嵌套路由：

const routes = [
 {
   path: '/',
   name: 'Home',
   component: Home,
   children: [
     {
       path: 'dashboard',
       name: 'Dashboard',
       component: Dashboard
     },
     {
       path: 'settings',
       name: 'Settings',
       component: Settings
     }
   ]
 },
 {
   path: '/about',
   name: 'About',
   component: About
 }
]

在父组件中使用<router-view>来渲染子路由：

<template>
 <div>
   <h1>Home</h1>
   <router-view></router-view>
 </div>
</template>

在子组件Dashboard.vue和Settings.vue中分别定义子路由组件。

<!-- Dashboard.vue -->
<template>
 <div>
   <h1>Dashboard</h1>
 </div>
</template>

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

<!-- Settings.vue -->
<template>
 <div>
   <h1>Settings</h1>
 </div>
</template>

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

状态管理

在Vue项目中，状态管理是非常重要的一部分，可以使用Vuex来管理应用的状态。下面详细介绍Vuex的基本概念和使用方式。

Vuex的基本概念

Vuex是一个专门为Vue.js应用开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生改变。

安装Vuex：
```
npm install vuex@next
```

创建Vuex store文件src/store/index.js：

import { createStore } from 'vuex'

const store = createStore({
 state: {
   count: 0
 },
 mutations: {
   increment(state) {
     state.count++
   }
 },
 actions: {
   incrementAction({ commit }) {
     commit('increment')
   }
 },
 getters: {
   doubleCount: state => state.count * 2
 }
})

export default store

在src/main.js中引入并使用Vuex store：


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

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

使用Vuex管理应用状态

在组件中访问状态：

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

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

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

在组件方法中调用Vuex的actions：

<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(['incrementAction']),
   increment() {
     this.incrementAction()
   }
 }
}
</script>

项目部署

完成项目的开发后，需要将项目构建和打包，并部署到服务器或云平台。下面详细介绍项目构建和打包的方法，以及如何部署到服务器或云平台。

项目构建和打包

使用npm run build命令构建项目：
```
npm run build
```
构建完成后，会在dist目录下生成一个生产环境的代码，可以被部署到服务器上。
查看构建输出的目录结构：
```
dist/
├── index.html
├── manifest.json
├── assets/
└── vendor.js
```
这些文件都是构建后需要部署到服务器上的内容。

部署到服务器或云平台

以下是将构建后的项目部署到服务器或云平台的一般步骤：

部署到服务器：
- 将dist目录下的所有文件上传到服务器的Web根目录。
- 如果服务器是Linux环境，可以使用scp或者rsync命令来上传文件。
- 确保服务器上有运行Web服务器（如Nginx或Apache）的权限，并配置好Web服务器的配置文件。
部署到云平台：
- 选择云平台服务提供商（如阿里云、腾讯云等），创建一个实例。
- 登录云平台控制台，找到实例，通过SSH登录到实例。
- 将dist目录下的所有文件上传到实例的Web根目录。
- 配置Web服务器，并启动服务器。

总结一下，通过按照上述步骤进行环境搭建、项目结构解析、组件开发、路由管理、状态管理以及项目部署，你可以成功搭建和部署一个Vue项目。希望这篇文章能帮助你更好地理解和应用Vue开发技术。如果需要更深入的学习，可以参考慕课网的相关教程。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

倚天杖

手记
篇

粉丝

47

获赞与收藏

187

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30583 343

网络编程入门教程

20个小节 12561 237

Pandas 入门教程

25个小节 18497 337

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空