Vue3_创建项目

一、创建vue项目

1.下载vue

2.进入刚才创建的项目

3.安装依赖

4.运行项目

5.打包项目放入生产环境

二、vue项目组成

1.项目文件结构

2.项目重要文件

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

vue官网链接https://cn.vuejs.org/guide/introduction.html

边看本文边在线练习单独的一个vue文件，点击这个链接。

在线练习编辑Vue文件https://play.vuejs.org/#eNp9kVFLwzAQx7/KeS9TmBuiT6MOVAbqg4oKvuSltLeuM01CcpmF0u/utaXVhzEISe7/vyS/yzV459ziEAlXmITMl47XylDtrGfIaZtGzdAoA5CnnJ5fDHsATxy9GSOAKhQrmD2S1ha+rNf52Wyw2m6RSUaynB6QgKlyOmWSCCDZXa2bprsF2jZZStSrpXGR4XBZ2Zz0rULxFYqVLKfTOEcOmTXbsljsgzVSRw+lMLOVKzX5V8elNUHhasRVmArnz3OvsY80H/VsR9n3EX0f6k5T+OYpkD+Qwsnj1BfEg735eKFa9pMp5FFL9gnznYLVsWMc0u6jyQX7X15P+1R1PSlN8Rk2NZMJY1EdaP/Jfb5CaebDidL/cK8XN2NzsP0F+HSp8w==

一、创建vue项目

前提：已安装 18.3 或更高版本的Node.js，如果没有安装Node.js看这个文章。

安装Node.jshttps://blog.csdn.net/zxy19931069161/article/details/138838537?spm=1001.2014.3001.5501在想创建vue项目的文件夹下打开cmd或者用编辑器进入终端：

1.下载vue

npm create vue@latest

输入项目名称vue-project，然后一直回车就可以。生成的项目中的示例组件使用的是组合式API 和 <script setup>，而非选项式API。

2.进入刚才创建的项目

cd vue-project      //vue-project 替换成你的项目名称

3.安装依赖

npm install

4.运行项目

npm run dev

运行起来的项目页面：

5.打包项目放入生产环境

npm run build

此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本。将dist文件夹放入生产环境即可。

二、vue项目组成

1.项目文件结构

2.项目重要文件

①index.html：

这个页面只需要改一个名字，后续开发中也不需要对其进行编辑。

②main.js：

这个页面很重要，它初始化vue，所有需要用的文件都需要从这里引入，比如引入样式element-plus、引入vuex、引入router等以及全局组件注册等。

因为刚创建的vue项目，所以它现在内容很少，后续会越来越多。

import './assets/main.css'

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

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

createApp(App)：以App作为参数生成一个应用实例对象
mount(‘#app’)：挂载到id为app节点上。

③App.vue:

app.vue是vue页面资源的首加载项，是主组件，页面入口文件，所有页面都是在app.vue下进行切换的；app.vue负责构建定义及页面组件归集。

app.vue文件的作用：1、一般就是指整个vue项目的根组件，用来展示组件中内容；2、app.vue是针对整个项目称作根组件，template下的子元素是针对当前的vue实例称作根组件。

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

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>
  <main>
    <TheWelcome />
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

④vite.config.js:

vite.config.js 是在使用 Vite 作为构建工具的 Vue 项目中用来配置 Vite 行为的一个配置文件。这个文件通常位于项目的根目录下。

vite.config.js 文件的主要作用是：

配置 Vite 服务器的选项，比如端口号、是否开启热重载、是否开启 CSS 预处理器支持等。
配置插件，比如使用 Vite 插件来集成其他构建工具或功能。
配置别名，简化文件引用路径。
配置 Optimizations，比如引入生产环境特定的插件。
配置全局变量，在项目中直接使用而不需要import。

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    port: 3000,
    open: true,
  },
})

在这个配置中，我们引入了 defineConfig 方法来创建配置对象。我们还引入了 @vitejs/plugin-vue 插件来处理 Vue 文件，并设置了一个别名 @ 指向项目 src 目录。服务器配置中设置了端口号为 3000，并在启动时自动打开浏览器。