Vite2.0 搭建 Vue3.0 项目：从零到一，打造现代化前端应用

2023-10-27 13:03:44

引言

在当今快速发展的数字世界中，前端开发的重要性日益凸显。作为前端开发人员，我们需要掌握最新的技术和工具，才能跟上时代潮流，满足用户不断变化的需求。Vite2.0 和 Vue3.0 是前端开发领域的两大明星，它们强强联手，可以帮助我们轻松打造现代化、高性能的前端应用。

搭建 Vite 项目

首先，我们需要搭建一个 Vite 项目。Vite 是一个轻量级且快速的构建工具，可以帮助我们快速构建和开发前端项目。

安装 Vite

npm install -g vite

创建项目

vite create my-vue3-project

启动项目

cd my-vue3-project
npm run dev

引入 Vue-router 和 UI 库

接下来，我们需要引入 Vue-router 和 UI 库。Vue-router 是一个用于管理前端路由的库，可以帮助我们构建单页面应用。UI 库则可以为我们提供丰富的组件，帮助我们快速构建出美观实用的用户界面。

安装 Vue-router 和 UI 库

npm install vue-router
npm install element-ui

在 main.js 中引入 Vue-router 和 UI 库

import Vue from 'vue'
import VueRouter from 'vue-router'
import ElementUI from 'element-ui'

Vue.use(VueRouter)
Vue.use(ElementUI)

配置路由

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

在 App.vue 中使用路由

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

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

改造 main.ts 引入 router UI

接下来，我们需要改造 main.ts 文件，引入路由和 UI 库。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'

Vue.use(ElementUI)

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

增加 eslint + prettier

为了保证代码质量，我们可以引入 eslint 和 prettier。eslint 可以帮助我们检查代码中的错误和不规范之处，而 prettier 可以帮助我们自动格式化代码，使代码更加美观易读。

安装 eslint 和 prettier

npm install eslint eslint-plugin-vue prettier

在项目根目录创建 .eslintrc.js 文件

module.exports = {
  extends: [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  rules: {
    'vue/single-line-html-attribute-spacing': ['error', 'always']
  }
};

在项目根目录创建 .prettierrc.js 文件

module.exports = {
  semi: true,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 120
};

在 package.json 中添加脚本

{
  "scripts": {
    "lint": "eslint --ext .js,.vue src",
    "format": "prettier --write src"
  }
}

创建项目

现在，我们已经搭建好了一个基本的 Vite + Vue3.0 项目。接下来，我们可以开始创建自己的项目了。

在项目根目录创建 src 文件夹
在 src 文件夹中创建 App.vue 文件

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

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

在 src 文件夹中创建 main.js 文件

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

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

在 public 文件夹中创建 index.html 文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    
  </head>
  <body>
    <div id="app"></div>
    <script src="main.js"></script>
  </body>
</html>