创建vue项目

首页

IDEA创建vue项目

1. 新建项目，选择JavaScript中的vue.js
2. 命名后下一步，即可创建完成
   
   
3. 创建完成后，即可在package.json中运行项目
   
4. 项目跑起来后，就可以在浏览器中访问http://localhost:8081，即可浏览项目
   

使用webpack创建项目

webpack

前端包管理工具，使用webpack管理前端文件。功能类似于java的maven。使用webpack打包后，生成一个可以直接使用的前端文件。前端代码编写使用的是es6，打包后的文件语法使用的是es5，用于兼容各个浏览器。

1. 使用cmd命令创建项目 vue init webpack myvue
2. 根据需求，点击下一步直至完成，项目即可创建成功

相比于上个用idea创建的vue项目，项目中多了build，config，static等目录。
build目录下有webpack.base.conf.js。文件中定义了程序入口 entry，程序输出路径outputpath，程序依赖 modules。
config目录下有index.js。里面定义了host，port等参数
static目录，用于存储静态文件

使用vue-router

在使用webpack创建项目时，选择添加vue-router，项目创建好后，即带了相应的依赖。
使用

1. 在components中创建新了vue文件
2. 在router目录下的index.js文件中，首先import vue文件，然后在routes中，新增路由配置。
3. 在App.vue中，添加router-link和router-view两个标签，router-link中使用to属性定义路径，路径中的组件内容即可显示在router-view标签所在位置.

    <router-link to="/main">main</router-link>
    <router-link to="/">home</router-link>
    <router-view/>

4. 此时在页面中，即可看到路由内容，并进行切换操作

vite创建项目

vite是区别于webpack的创建vue项目创建工具。使用webpack时，每次编译都是将vue文件统一打包，使用的时候使用打包后的js文件。使用vite时，由于现在浏览器支持vue文件，所以在开发环境下，使用的直接时vue文件，没有编译的过程。所以在开发环境下，会更快。

npm init vite@latest my-vue-app --template vue

使用此命令，即可创建一个vue项目
ui层面，可以使用element plus。以前的element ui适用于vue2，而plus适用于vue3

使用github上的社区模板

模板地址：https://github.com/antfu/vitesse
可以直接拉下来使用