vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue框架搭建

详解Vue3框架的搭建及工程目录

作者：墨染夜雨笺

文章介绍了如何使用Node.js搭建Vue工程,并对Vue工程目录进行了详细解读,包括各种文件夹和文件的作用,此外,还讲解了如何设置网页标题和全局样式,以及如何配置路由,感兴趣的朋友一起看看吧

文章目录 安装软件Node.js搭建Vue工程创建Vue工程精简Vue项目文件 Vue工程目录的解读网页标题的设置设置全局样式路由配置

安装软件Node.js

下载地址：https://nodejs.org/zh-cn/

安装完成后，打开cmd,查看环境是否准备好

node -v
npm -v

npm使用之前一定要配置淘宝镜像源

npm config set https://registry.npmmirror.com

查看镜像

npm config get registry

镜像可能会变，如果改变通过网上查找最新

搭建Vue工程

vue.js官网：https://cn.vuejs.org

vue.js快速上手页面：https://cn.vuejs.org/guide/quick-start.html

前提条件：

使用命令行查看node.js版本

node -v

新建一个文件夹，在文件夹上方搜索栏输入cmd打开当前目录下的cmd窗口

这种打开方式是非管理员方式，如果执行命令时报错，那就是权限问题，就要使用管理员身份运行。

管理员身份运行cmd:

搜索cmd,点击以管理员身份运行

这时候管理员身份打开的是C盘文件夹，我们需要通过cd xxx的方式转到项目所在文件夹。

①先输入D:，转到D盘盘符

然后复制项目所在文件夹的路径，在cmd窗口输入cd,然后再空格，最后粘贴路径，再回车

在这个目录下，我们就可以使用命令创建Vue工程及后续操作了。

创建Vue工程

使用命令创建Vue工程：

npm create vue@latest

然后根据提示运行提供的三行命令

cd vue-project,npm install(也可以简写成npm i),npm run dev

正常启动后，根据系统提供的Local地址，去浏览器打开相应的页面

在命令行页面按两次Ctrl+C关闭正在运行的Vue工程

精简Vue项目文件

在IDEA打开相应的文件夹，删掉一些文件及文件夹，精简项目文件

在IDEA中打开package.json(依赖文件），点击"dev":"vite"旁边的按钮，执行启动，相当于命令行中的npm run dev

编码配置，改为UTF-8,改完一定要Save或Apply

在Inspections—>输入Vue,将原先打勾全部取消勾选，这样就没有红色波浪线的提示。

删除相关文件，将选中的文件删掉（按住Ctrl,然后点击相关文件）

由于删除了某些文件，因此很多文件的代码也要更改

①HomeView.vue

这是原先样式：

由于TheWelcome.vue删除了，这里面import要删除，同时template中的main也要删除

最后，HomeView.vue改名为Home.vue

<template>
<div>
  主页
</div>
</template>
<script setup>
</script>

②App.vue

然后来到App.vue，这里面的原先页面是这样，也需要进行删除和精简

删除无用代码后的页面：

<template>
  <RouterView />
</template>

③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/Home.vue'),
    },
  ],
})
export default router

④main.js

之前main.css删除了，这里也需要删除import

修改后的代码：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')

现在修改完成后，重新启动，如果出现这样的页面，有出现访问路径，说明修改得没问题

在浏览器打开就是这样一个页面，后续可以根据自己的需求再添加代码，让页面更丰富。

Vue工程目录的解读

Vue工程下面有很多文件夹和文件，下面说明一下他们的作用

node_modules:不是源码文件，是依赖包下载后的存放目录。

public:存放全局静态文件，比如说网页的icon

很多网页有这种小图标（icon文件），这个就要放public后才会显示

src:

index.html:vue编译成网页才能在浏览器渲染,是 Vue 应用的起点，浏览器加载这个文件后，Vue 才能开始工作。

jsconfig.json:内部配置文件

package.json:定义依赖库的文件

package-lock.json:下载依赖的时候锁定版本的一个文件(固定版本，防止用户启动后又修改）

vite.config.js:全局的配置文件（Vue3是基于vite的工具来配置的，配置端口之类的，比如我可以配置端口8080，这样启动时就使用8080端口，而不是分配的5173端口）

网页标题的设置

在index.html中修改title标签即可改变网页标题

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico" rel="external nofollow" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--      网页标题-->
    <title>springboot-vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

设置全局样式

在src/assets文件夹下面新建文件夹css,css文件夹中新建一个global.css

在global.css添加代码(用于消除边距）

*{
    box-sizing: border-box;
}
body{
    margin: 0;
    padding: 0;
    color: #333;
    font-size: 14px;
}
a{
    text-decoration: none;
}

然后在main.js中引入global.css

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

路由配置

配置404页面，很多时候网页并没有那个路由，用户访问的时候就要跳出404页面提示用户网页不存在

首先在assets目录新建目录imgs,然后将图片放到该目录下

在views文件夹下新建一个404.vue,然后写相应的代码

<template>
<div style="height: 100vh;display: flex;align-items: center;justify-content: center;">
  <div style="width: 50%">
  <img style="width: 100%" src="@/assets/imgs/404.png" alt="">
  <div style="text-align: center;font-size: 20px;color: #0e1986;padding: 20px 0;"><a href="/" rel="external nofollow"  rel="external nofollow" >返回主页</a></div>
  </div>
</div>
</template>
<script setup lang="ts">
</script>

<template>
<div style="height: 100vh;display: flex;align-items: center;justify-content: center;">
  <div style="width: 35.5%">
  <img style="width: 100%" src="@/assets/imgs/404.jpg" alt="">
  <div style="text-align: center;font-size: 20px;color: #0e1986;padding: 20px 0;"><a href="/" rel="external nofollow"  rel="external nofollow" >返回主页</a></div>
  </div>
</div>
</template>
<script setup lang="ts">
</script>

到此这篇关于Vue3框架的搭建及工程目录详解的文章就介绍到这了,更多相关vue框架搭建内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文