创建完整vue前端项目流程

随便1007

已于 2024-03-05 20:31:23 修改

阅读量638

点赞数 20

文章标签： vue.js 前端

于 2024-02-16 12:03:33 首次发布

本文链接：https://blog.csdn.net/fyr6103032003/article/details/136127017

版权

在前文（用CScode创建vue前端的环境配置）的基础上，做了更详细的注释和步骤，并且加入了创建简单组件的说明。

创建完整项目流程

简介

vue官网

Vue.js - 渐进式 JavaScript 框架 | Vue.js

vite官网

Vite中文网

Vite 是一种具有明确建议的工具，具备合理的默认设置。您可以在功能指南中了解 Vite 的各种可能性。通过插件，Vite 支持与其他框架或工具的集成。如有需要，您可以通过配置部分自定义适应你的项目。

Vite 还提供了强大的扩展性，可通过其插件 API 和 JavaScript API 进行扩展，并提供完整的类型支持。

前期准备

安装node.js 并配置环境

点击这里下载

根据自己电脑系统及位数选择，我这里选择windows64位.msi格式安装包

下载完成后，双击安装包，开始安装，一直点next即可，安装路径默认在C:\Program Files下，也可以自定义修改

安装完成后，.msi格式的安装包已经将node.exe添加到系统环境变量path中,如果你下载的是.zip格式，因为没有安装过程，所以需要手动将node.exe所在目录添加到环境变量path中，查看系统变量验证

安装git 并配置环境

Git下载网址

根据自己电脑系统及位数选择

下载完成后，双击安装包，开始安装，一直点next即可，安装路径默认在C:\Program Files下，也可以自定义修改

下载后自动将git.cmd所在目录添加到环境变量path中

注册并登录gitee账号

在VScode中下载gitee插件

PS C:\Users\Lenovo\Downloads\克隆文件\20231115> cd
PS C:\Users\Lenovo\Downloads\克隆文件\20231115> cd ..
PS C:\Users\Lenovo\Downloads\克隆文件> npm create vite@latest
√ Project name: ... 20231115
√ Target directory "20231115" is not empty. Remove existing files and continue? ... yes
√ Select a framework: » Vue
√ Select a variant: » JavaScript

Scaffolding project in C:\Users\Lenovo\Downloads\克隆文件\20231115...

Done. Now run:

  cd 20231115
  npm install
  npm run dev

PS C:\Users\Lenovo\Downloads\克隆文件> cd 20231115
PS C:\Users\Lenovo\Downloads\克隆文件\20231115> npm install

added 25 packages, and audited 26 packages in 29s

3 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
PS C:\Users\Lenovo\Downloads\克隆文件\20231115> npm run dev

> 20231115@0.0.0 dev
> vite


  VITE v4.5.0  ready in 343 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

组件的嵌套

根据下图做组件嵌套

首先写Article组件

<template>
    {{ i }}
</template>
<script><template>
    <p>{{ i }}</p>
</template>
<script>
export default {
    data() {
        return {
            i: "article"
        }
    },
}
</script>
<style scoped>
p {
    width: 80%;
    margin: 0auto;
    text-align: center;
    line-height: 100px;
    box-sizing: border-box;
    margin-top: 50px;
    background: #999;
}
</style>
export default {
    data() {
        return {
            i: "article"
        }
    },
}
</script>

写Item组件

<template>
    <p>{{ i }}</p>
</template>
<script>
export default {
    data() {
        return {
            i: "Item"
        }
    },
}
</script>
<style scoped>
p {
    width: 80%;
    margin: 9auto;
    text-align: center;
    line-height: 100px;
    box-sizing: border-box;
    margin-top: 10px;
    background: #999;
}
</style>

写Header组件

<template>
    <p>header</p>
</template>
<script>
</script>
<style scoped>
p {
    width: 100%;
    height: 100px;
    border: 5pxsolid#999;
    text-align: center;
    line-height: 100px;
    box-sizing: border-box;
}
</style>

然后在Main 添加两个Article组件

<template>
    <div class="a">
        <Article></Article>
        <Article></Article>
    </div>
</template>
<script>
import Article from './Article.vue';
export default {
    components: {
        Article
    }
}
</script>
<style scoped>
.a {
    float: left;
    width: 70%;
    height: 400px;
    border: 5pxsolid#999;
    box-sizing: border-box;
    border-top: 0px;
}
</style>

在Aside 添加两个Item组件

<template>
    <div class="b">
        <Item></Item>
        <Item></Item>
        <Item></Item>
    </div>
</template>
<script>
import Item from './Item.vue';
export default {
    components: {
        Item
    }
}
</script>
<style scoped>
.b {
    float: right;
    width: 30%;
    height: 400px;
    border: 5pxsolid#999;
    box-sizing: border-box;
}
</style>

最后在App中添加组件

<template>
  <div class="c">
    <Header></Header>
    <Main></Main>
    <Aside></Aside>
  </div>
</template>
<script>
import Header from "./components/Header.vue"
import Main from "./components/Main.vue"
import Aside from "./components/Aside.vue";
export default {
  components: {
    Header,
    Main,
    Aside
  }
}
</script>
<style scoped>
.c {
  width: 1000px;
  background-color: #fff;
}
</style>