正文

Vue3项目从零开始：详细步骤解析与必备依赖清单

/0 浏览量
0827

准备工作

在开始创建Vue3项目之前，你需要确保你的计算机上安装了Node.js和npm（Node.js包管理器）。Vue3依赖于Node.js，因此这两者必须先安装好。

步骤1：安装Vue CLI

Vue CLI是Vue官方提供的脚手架工具，用于快速搭建Vue项目。以下是安装Vue CLI的步骤：

# 安装Vue CLI全局版本
npm install -g @vue/cli

# 检查Vue CLI版本
vue --version

步骤2：创建新项目

使用Vue CLI创建新项目时，你可以选择手动输入项目名称或使用默认名称。

# 创建新项目，并选择默认的Vue 3版本
vue create my-vue3-project

# 或者指定Vue 3版本
vue create my-vue3-project --version 3.x

在创建项目的过程中，Vue CLI会询问你一系列问题，包括：

  • 是否使用Vue Router
  • 是否使用Vuex
  • 是否使用Babel
  • 是否使用TypeScript
  • 是否使用ESLint

根据你的需求选择相应的选项。

步骤3：进入项目目录

创建完项目后，进入项目目录。

cd my-vue3-project

步骤4：启动开发服务器

在项目目录下，使用以下命令启动开发服务器。

npm run serve

默认情况下，Vue CLI会启动一个本地服务器，并在浏览器中自动打开一个新标签页，显示你的Vue应用。

步骤5：编写Vue组件

在src/components目录下，你可以创建新的Vue组件。例如，创建一个名为HelloWorld.vue的组件：

touch src/components/HelloWorld.vue

编辑HelloWorld.vue文件，添加以下内容：

<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

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

<style scoped>
h1 {
  color: #42b983;
}
</style>

在src/App.vue文件中，将HelloWorld组件引入到模板中：

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

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

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

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

步骤6：配置路由

如果你选择了安装Vue Router，那么你可以按照以下步骤配置路由。

首先，安装Vue Router：

npm install vue-router

然后，创建一个router.js文件，并配置路由：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: HelloWorld
    }
  ]
})

在main.js文件中，将router实例注入到Vue实例中：

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

Vue.config.productionTip = false

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

步骤7：配置Vuex

如果你选择了安装Vuex，那么你可以按照以下步骤配置Vuex。

首先，安装Vuex：

npm install vuex

然后，创建一个store.js文件，并配置Vuex：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment ({ commit }) {
      commit('increment')
    }
  }
})

在main.js文件中，将store实例注入到Vue实例中：

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

Vue.config.productionTip = false

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

步骤8：配置ESLint

如果你选择了安装ESLint，那么你可以按照以下步骤配置ESLint。

首先，安装ESLint：

npm install eslint --save-dev

然后，安装ESLint插件：

npm install eslint-plugin-vue --save-dev

在项目根目录下创建.eslintrc.js文件，并配置ESLint规则：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

最后，在package.json文件中添加以下脚本：

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

运行以下命令检查ESLint规则：

npm run lint

步骤9：构建生产环境

在开发完成后，你可以使用以下命令构建生产环境：

npm run build

这会生成一个dist目录，其中包含生产环境下的Vue应用。

必备依赖清单

以下是创建Vue3项目时可能需要的必备依赖清单：

  • Node.js
  • npm
  • Vue CLI
  • Vue Router
  • Vuex
  • ESLint
  • Babel
  • TypeScript

希望这篇文章能帮助你从零开始创建一个Vue3项目。祝你学习愉快！

-- 展开阅读全文 --