vue3.0+vue-router+element-plus初实践

下面是 "Vue3.0 + Vue Router + Element Plus初实践" 的完整攻略：

1. 安装Vue3.0

可以在终端中使用以下命令安装Vue3.0:

npm install vue@next

注意，"@next" 表示安装的是Vue3.0版本。

2. 安装Vue Router

可以在终端中使用以下命令安装Vue Router:

npm install vue-router@4.0.3

注意，"@4.0.3"表示安装的是Vue Router的4.0.3版本。

3. 安装Element Plus

可以在终端中使用以下命令安装Element Plus:

npm install element-plus@1.1.0-beta.1

注意，"@1.1.0-beta.1"表示安装的是Element Plus的1.1.0-beta.1版本。

4. 创建Vue应用

在安装完Vue3.0之后，我们可以利用Vue CLI创建一个Vue应用。执行以下命令:

vue create my-app

其中，"my-app"是应用的名称。创建完成后，进入应用所在目录：

cd my-app

5. 集成Vue Router

在my-app目录下，安装Vue Router，通过以下命令来安装：

npm install vue-router@4.0.3

在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(process.env.BASE_URL),
  routes
})

export default router

在main.js文件中导入路由：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

至此，已经成功完成了Vue Router的集成，接下来我们来尝试一下初步效果。

在src/views目录下，创建两个视图文件：Home.vue和About.vue。

以下是示例代码：

• Home.vue

<template>
  <div>
    <h1>Home</h1>
    <p>Welcome to Home Page!</p>
  </div>
</template>

• About.vue

<template>
  <div>
    <h1>About</h1>
    <p>Welcome to About Page!</p>
  </div>
</template>

现在我们可以在路由里设置默认页为Home.vue，访问 http://localhost:8080/，便可以看到“Home”页面的效果。输入 http://localhost:8080/about，可以看到“About”页面的效果。

6. 集成Element Plus

在main.js文件中导入Element Plus的组件库：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

createApp(App).use(router).use(ElementPlus).mount('#app')

然后，在相应组件代码中使用Element Plus的组件。

以下是示例代码：

<template>
  <div>
    <el-button>这是一个按钮</el-button>
    <el-input v-model="inputValue" placeholder="请输入搜索内容"></el-input>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>

在这个示例中，我们分别使用了Element Plus的按钮和输入框组件。 和 标签被添加到了Vue模板中。这两个组件现在可以被方便地使用。

以上就是在Vue应用中使用Vue Router和Element Plus的完整攻略。