vue项目的创建_创建vue 项目-爱代码爱编程
个人学习文档，有问题欢迎指出。
关于Vue项目的创建可以查看vue官网：
https://cn.vuejs.org/guide/quick-start.html
目录
Vue项目创建步骤：
1、打开命令窗口
打开项目需要存放的文件夹，输入cmd，进入命令窗口。
2、输入命令创建项目
在命令窗口输入命令，构建项目，然后输入 Y 继续。
npm create vue@latest等待项目的构建，网速慢的话需要等待一段时间。
3、进行项目相关的配置
初学Vue，建议全部都选择否，后面需要的话再进行配置。
4、下载依赖文件
下载node_modules 文件：node_modules 是一个文件夹，它主要用于存放项目依赖的第三方包（如 Vue.js 框架本身、Vue Router、Vuex 等插件以及其他工具库）。
1、进入项目文件夹
通过命令进入进入刚才创建的项目中去，或者退出命令窗口，点击项目，在项目中重新输入cmd，进入命令窗口
cd hy_note_vue2、下载node_modules包
npm install这个需要等待，
若出现下面的错误，关闭窗口，重新输入。
当输入npm install命令时，卡着不动，可以使用下面命令。（若不能成功，就使用老办法等待，或者搜索cnpm 命令使用的具体操作）
npm install cnpm -g --registry=https://registry.npmmirror.com
注意：我这个直接使用cnpm install 是错误的，这个方式下载的node_modules文件夹中只有一个文件，node_modules文件夹下不了一个文件。
3、完成配置，
查看node_modules文件夹
5、启动项目
npm run dev
复制网址，进行打开就能看到创建的项目了。
Vue项目的认识
全是个人对Vue项目的认识，有不正确的请指出。
1、使用vscode打开项目
2、认识每个文件夹
public ： 放的是图标，vue的商标。
src ：放主要代码。
assets ：存放静态图片和css样式。
components：存放主键。
router： 路由的配置。
stores： 全局状态管理的配置。
views： 存放页面。
App.vue : vue主的页面。
main.js ：vue的核心文件
package.json：配置项目的核心文件，里面包含项目的名称、版本、构建命令、打包、依赖、开发环境的依赖。
3、删除没有用的文件
把项目自带的无用文件进行删除，方便自己项目页面的创建。
1、components包的删除
将components包下的文件全部删除，都是页面文件，删除后，得到一个感觉的页面。
2、assets包的删除
删除base.css和main.css文件，这两个都是原有页面的css文件，有可能会影响我们页面的设置。
3、对router中的路由进行删除
因为我们删除了原有页面。
4、删除stores文件夹下的文件
5、main.js 文件
删除 import './assets/main.css' 我们删除了main.css文件，不删除这个引用会报错。
6、删除views包下的页面
删除AboutView.vue和HomeView.vue文件。
页面显示
1、创建Login.vue 页面
在views中创建一个Login页面。
2、路由配置
在项目中的 src/router/index.js 文件中配置路由，将 Login 组件与一个路由路径关联起来，
import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
//配置路由规则
const constRouter = [
// 重定向
{
path: '',
redirect: "/login"
},
{
path: '/login',
name: 'login',
component: Login
},
]
// 创建路由
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
// 使用路由规则常量
routes: constRouter
})
// 导出router
export default router
3、在主视图中显示出来
在App.vue 中使用<RouterView />来显示 Login 组件： 在项目中的 src/App.vue 文件中，确保使用了<RouterView />来显示当前路由对应的组件。
<template>
<!-- 容器 -->
<RouterView />
</template>
<script setup>
</script>
<style scoped>
</style>
4、启动项目
推荐插件
有关vscode的插件
