前端vue3框架搭建及创建项目工程完整步骤(小白版)

一、新建vue项目

（一）交互式指令创建vue项目

1.新建文件夹：

vue3测试项目---代码---code2025

2.用cmd打开命令行

cd code2025
npm create vue@latest
y

再根据图片内选择 ：否、不需要

验证是否成功：

继续：

cd vue
npm i

npm run dev

自动跳转得到：

打开你显示出来的Local:  http://localhost:5173/

二、在idea启动vue工程

1.删除无用文件

划线的删去

2.关闭vue：

回到CMD命令行，按住ctrl + C 两次

3.启用vue工程

4.配置编码：

5.继续删除无用文件：

删除import XXXXX:

代码如下：

<template>
  <div>
    主页
  </div>
</template>

<script setup>

</script>

6.改名与删除配置

HomeView.vue改名Home.vue：

最终如图：

APP.vue删除无用的代码，只保留

<template>
  <RouterView />
</template>

继续删除无用文件：

打开code2025---vue---src---router---index.js更改，看不懂的直接复制我的代码即可，如下

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',  name: 'home',
      component: import('../views/AboutHome.vue')
    },
  ],
})

export default router

如图：

重启：

三、vue工程目录讲解

1.项目目录知识点讲解

node_modules:不是我们的源码文件，这个是依赖包下载之后的存放目录
public:存放全局的静态文件，比如说网页的icon
src:

1. assets:一般是存放代码引用的静态文件，比如:css、js、img
2. components:放一下vue的组件(可复用的代码块，就叫组件)
3. router:定义路由文件的目录
4. views:存放 vue 网页文件的目录
5. App.vue:vue 页面全局的入口，所有vue 文件的父级
6. main.js:代码的配置文件，引入第三方的组件或者我们自己定义的一些组件、css、js 等

index.html:vue编译成网页才能在浏览器渲染
jsconfig.json:内部配置文件
package.json:定义依赖库的文件
package-lock.json:在你下载依赖的时候锁定版本的一个文件
vite.config.js:全局的配置文件

2.设置网页标题

3.设置全局CSS global.css

在src---assets路径下新建directory命名为:css,新建file命名为:global.css,如图：

*{
    box-sizing: border-box;
}

body{
    margin: 0;
    padding: 0;
    color:#333;
    font-size: 14px;
}

a{
    text-decoration: none;
}

在main.js引入global.js 

import'./assets/css/global.css'

在index中打开页面，查看效果

4.定义404页面

先下载一张404图片到本地再根据图片步骤操作

先将404图片复制到新建的directory，再新建404.vue，再写图片路径，再增添路由配置

<template>
  <div>
    <img src="~assets/img/404.png" alt="">
  </div>
</template>

写到这里发现自己的vue文件是灰色的，查找教程发现没有下载插件：

File->Settings->Plugins，点击下载即可

变成有颜色的了，如果你的不可以，回到上边，检查是否apply后才ok的，有的不是自动的。

随即再次尝试

查看配置是否正确：

重试一下，得到结果：

大功告成！！！

继续配置颜色和样式可以在view文件夹内配置vue文件、修改路由器配置可得。

总结

到此这篇关于前端vue3框架搭建及创建项目工程完整步骤的文章就介绍到这了,更多相关vue3搭建创建项目工程内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论