一、安装Vue CLI
Vue CLI是Vue.js官方提供的基于Vue.js进行快速开发的标准工具。安装Vue CLI前需要先安装Node.js和npm。
$ npm install -g @vue/cli
安装完成后,可以通过以下命令进行Vue CLI版本确认:
$ vue --version
如果能够正常输出版本号,则说明安装成功。
二、创建项目
创建项目需要使用Vue CLI提供的命令行工具,首先需要进入想要创建项目的目录,然后使用以下命令进行项目创建:
$ vue create my-project
其中,my-project为项目名称,可以根据自己的需求进行修改。
接下来,Vue CLI会询问你想要使用哪种配置(默认为手动),可以按照需求进行选择。手动配置可以让你针对项目进行更加细粒度的设置,比如选择是否安装Vuex、Router等常用插件。
等待项目创建完成后,在命令行中进入项目所在目录,使用以下命令启动项目:
$ cd my-project
$ npm run serve
在浏览器中输入http://localhost:8080/即可访问项目。
三、创建组件
在Vue中,组件是构成整个应用程序的基本单元。Vue CLI在创建项目时已经自动帮我们创建了一个App.vue组件,在此基础上可以通过以下步骤创建自己的组件。
1、在src目录下新建一个.vue文件,比如我们新建一个HelloWorld.vue。
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: 'Welcome to my Vue.js app!'
}
}
}
</script>
2、在其他组件中使用该组件。
<template>
<div class="other-component">
<hello-world/>
</div>
</template>
<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
components: {
HelloWorld
}
}
</script>
在其他组件中引入HelloWorld组件,并将其注册为本组件的子组件,即可在该组件中使用HelloWorld组件的功能。
四、使用Vue Router进行页面路由
Vue Router是Vue.js官方提供的路由管理工具,可以用于实现SPA(Single Page Application)中的页面路由功能。以下介绍如何使用Vue Router进行页面路由。
1、安装Vue Router
$ npm install vue-router
2、创建路由
在src目录下新建一个router目录,在该目录下创建一个index.js文件,用于定义路由表的配置。
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
在routes中定义了两个路由,一个是根路由'/',一个是关于页路由'/about',并分别指向了两个组件Home和About。
3、在App.vue中添加
在App.vue中添加一个
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
在src目录下的main.js文件中使用Vue Router。
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
使用Vue Router后,通过点击两个链接就可以跳转到对应的组件了。
五、使用Vuex进行状态管理
Vuex是Vue.js官方提供的状态管理工具,可以用于管理全局状态(如登录状态、购物车、主题等)。以下介绍如何使用Vuex进行状态管理。
1、安装Vuex
$ npm install vuex
2、创建store
在src目录下新建一个store目录,在该目录下创建一个index.js文件,用于定义Vuex store配置。
import { createStore } from 'vuex'
export default createStore({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
incrementAsync(context) {
setTimeout(() => {
context.commit('increment')
}, 1000);
}
}
})
在state中定义了一个count值,mutations中定义了对count值进行加1的increment方法,actions中定义了异步操作,在1秒之后调用increment方法。
3、在组件中使用Vuex
在组件中可以使用Vuex store中的状态,通过$store.state.count来获取count值,通过$store.commit('increment')来调用increment方法。
同时,可以使用Vuex提供的computed属性,将Vuex store中的状态映射到组件的data中。
<template>
<div class="vuex-component">
<p>Count: {{ count }}</p>
<button @click="$store.commit('increment')">Increment</button>
<button @click="$store.dispatch('incrementAsync')">Increment Async</button>
</div>
</template>
<script>
export default {
name: 'VuexComponent',
computed: {
count() {
return this.$store.state.count
}
}
}
</script>
这样,我们就可以在组件中使用Vuex store中的状态和方法了。