创建vue项目-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_55046209/article/details/140894389

学习Vue编程可以通过以下几个步骤来进行：

基础知识准备：
- 了解HTML、CSS和JavaScript的基础知识。
- 熟悉ES6及以上的JavaScript新特性，如箭头函数、模板字符串、解构赋值等。
官方文档学习：
- 访问Vue.js的官方网站（vuejs.org/)
实践项目：
- 通过做一些小项目来巩固学习。可以从官方提供的示例项目开始，如TodoMVC、HackerNews Clone等。
- 尝试自己构思一些小项目，比如个人博客、待办事项应用等。
在线课程和教程：
- 利用在线教育平台，如慕课网、网易云课堂、Udemy等，寻找Vue相关的课程进行学习。
- 观看YouTube上的教程视频，很多开发者会分享他们的Vue项目开发过程。
参与社区：
- 加入Vue的社区，如Vue Forum、Vue Land（Discord）等，与其他开发者交流学习心得和问题。
- 关注Vue的GitHub仓库，了解最新的开发动态和贡献代码。
阅读源码：
- 阅读Vue的源码，了解其内部工作原理。这有助于深入理解Vue的设计理念和实现细节。
持续更新：
- Vue生态系统在不断发展，新的版本和工具会不断推出。保持关注，学习新的特性和最佳实践。

编程学习最重要的是实践，多写代码，多解决问题，不断提升自己的技能。

一个简单的有主页，两个子页的vue项目

步骤1：安装Vue CLI

确保已经安装了Vue CLI。如果没有，使用以下命令进行安装：

npm install -g @vue/cli

步骤2：创建Vue项目

使用Vue CLI创建一个新的Vue项目：

vue create my-vue-project

在创建过程中，选择默认的 preset 或者手动选择你需要的功能。

步骤3：进入项目目录并安装Vue Router

cd my-vue-project
npm install vue-router@4

步骤4：创建组件文件

在 src/components 目录下创建三个组件文件：HomePage.vue、PageOne.vue 和 PageTwo.vue。

HomePage.vue

<template>
  <div class="home">
    <h1>主页</h1>
    <p>欢迎来到主页！</p>
  </div>
</template>

<script>
export default {
  name: "HomePage",
}
</script>

<style scoped>
.home {
  text-align: center;
}
</style>

PageOne.vue

<template>
  <div class="page1">
    <h1>子页1</h1>
    <p>这是子页1的内容。</p>
  </div>
</template>

<script>
export default {
  name: "PageOne",
}
</script>

<style scoped>
.page1 {
  text-align: center;
}
</style>

PageTwo.vue

<template>
  <div class="page2">
    <h1>子页2</h1>
    <p>这是子页2的内容。</p>
  </div>
</template>

<script>
export default {
  name: "PageTwo",
}
</script>

<style scoped>
.page2 {
  text-align: center;
}
</style>

步骤5：配置路由

在 src 目录下创建 router.js 文件，并进行如下配置：

import { createRouter, createWebHistory } from 'vue-router'
import HomePage from './components/HomePage.vue'
import PageOne from './components/PageOne.vue'
import PageTwo from './components/PageTwo.vue'

const routes = [
  { path: '/', name: 'HomePage', component: HomePage },
  { path: '/page1', name: 'PageOne', component: PageOne },
  { path: '/page2', name: 'PageTwo', component: PageTwo },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

步骤6：修改 `main.js`

在 src/main.js 中导入并使用 router：

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

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

步骤7：修改 `App.vue`

在 src/App.vue 中添加导航链接并渲染路由视图：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">主页</router-link> |
      <router-link to="/page1">子页1</router-link> |
      <router-link to="/page2">子页2</router-link>
    </div>
    <router-view/>
  </div>
</template>

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

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>