Vue3项目的创建与运行

本文记录下自己近期学习的Vue3项目的创建，以及如何去运行一个Vue应用，同时包括对Vue项目结构进行一个简单的介绍。

一、node与npm的安装

通常平常进行开发的同学应该都已经具备node环境了，如果还没有的同学可以直接去node官网进行下载，npm会随node一同安装下来。

安装完成后可以通过以下的命令来查看node和npm是否安装成功

node -v

会输出node的版本

npm -v

会输出npm的版本

二、Vue应用的创建

cmd进入需要创建项目的文件夹目录下，执行下面的命令

npm init vite-app project_name

执行完成后，则在当前目录下会出现一个project_name(这是你创建的项目的名称，你可以自己进行修改)的文件夹,之后进入该文件夹下，可以看到一个最基本的Vue项目的结构。



一开始创建的目录下应该还没有node_modules和package-lock.json这两个文件，因此，我们需要通过下面的命令来下载我们项目所需的模块或者说是依赖

npm install

三、Vue应用的运行

在完成了模块的安装后，我们就可以去试着运行下这个Vue应用，通过下面的命令就可以直接运行

npm run dev

个人理解可以讲npm run 理解为运行某个脚本，而这里的dev脚本的定义则在package.json中有定义。

四、关于项目结构的介绍

要了解整个项目结构，可以先从index.html这个文件开始看，可以发现整个就是个普通html文件的结构，其中给了一个div标签，以及包含属性id为app，这里显然就是Vue要渲染的部分

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <link rel="icon" href="/favicon.ico" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Vite App</title>

</head>

<body>

  <div id="app"></div>

  <script type="module" src="/src/main.js"></script>

</body>

</html>

之后下面的script标签，引入了main.js这个文件，接下来就可以来查看下这个文件，main.js的文件内容如下:

import { createApp } from 'vue'

import App from './App.vue'

import './index.css'

createApp(App).mount('#app')

可以看到第一行从Vue引入createApp，以及下面的挂载至id为app的标签上，和以前我们直接用一个html些Vue应用是类似的：

<script>

  Vue.createApp({}).mount("#app")

<script>

其中App替代了我们之前的直接的一个json对象，因此，那么App就应该是我们之前所说的根组件，所以可以来看下App.Vue这个文件

<template>

  <img alt="Vue logo" src="./assets/logo.png" />

  <HelloWorld msg="Hello Vue 3.0 + Vite" />

</template>

<script>

import HelloWorld from './components/HelloWorld.vue'

export default {

  name: 'App',

  components: {

    HelloWorld

  }

}

</script>

可以看到export default的就是我们之前的那个json对象，HelloWorld就是定义的子组件，之前的写法是直接全都写在一起：

//子组件

 const HelloWorld = {

}

  app = Vue.createApp({

    components:{

      HelloWorld

    }

})

  app.mount("#app")

五、结语

总体上来说，Vue项目的结构更加符合工程化，各结构都是分开的，逻辑清晰，更加有利于项目的开发。

也许有不正确的地方，还请大家能够指出，共同学习，谢谢！

Vue3项目的简单搭建与项目结构的简单介绍的更多相关文章

  1. 零配置简单搭建SpringMVC 项目

    SpringMVC是比较常用的JavaWeb框架,非常轻便强悍,能简化Web开发,大大提高开发效率,在各种Web程序中广泛应用.本文采用Java Config的方式搭建SpringMVC项目,并对Sp ...

  2. Vue3实战系列：Vue3.0 + Vant3.0 搭建种子项目

    最近在用 Vue3 写一个开源的商城项目,开源后让大家也可以用现成的 Vue3 大型商城项目源码来练练手,目前处于开发阶段,过程中用到了 Vant3.0,于是就整理了这篇文章来讲一下如何使用 Vue3 ...

  3. springboot入门系列（一）：简单搭建springboot项目

    Spring Boot 简单介绍 Spring Boot 本身并不提供Spring框架的核心特性以及扩展功能,只是用于快速.敏捷地开发新一代基于Spring框架的应用程序.也就是说,它并不是用来替代S ...

  4. Vue ---- 项目与环境搭建 初始项目结构 Vue生命周期

    目录 1. vue环境搭建 2. Vue项目搭建 pycharm配置并启动vue项目 3 . 认识项目 1. vue项目目录结构 2. 配置文件:vue.config.js 3. main.js 4. ...

  5. 在本机搭建vue-cli3项目

    vue-cli3官方网址: https://cli.vuejs.org/zh/ 由于公司开始一个新项目,用到的是vue-cli3搭建的项目,所以自己想搭建一个项目,今天搭建的项目就是一个很简单的项目, ...

  6. 简单搭建iOS开发项目框架

    今天我们来谈谈如何搭建框架,框架需要做一些什么. 第一步:找到我们的目标我们的目标是让其他开发人员拿到手后即可写页面,不再需要考虑其他的问题. 第二步:我们需要做哪些东西各位跟着我一步一步来进行. 假 ...

  7. 基于Idea从零搭建一个最简单的vue项目

    一.需要了解的基本知识 node.js Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装.N ...

  8. 使用idea搭建Spring boot+jsp的简单web项目

    大家好: 这是我的第一篇博客文章,简单介绍一下Spring boot + jsp 的搭建流程,希望给跟我一样新接触Spring boot的读者一点儿启发. 开发工具:jdk1.8   idea2017 ...

  9. 带你搭建一个简单的mybatis项目：IDEA+spring+springMVC+mybatis+Mysql

    最近小编有点闲,突发奇想想重温一下mybatis,然后在脑海中搜索了一下,纳尼,居然不太会用了,想到这里都是泪啊!!现在我所呆的的公司使用的是springboot+hebinate,编程都是使用的JP ...

随机推荐

  1. layout_weight属性分析

    最近写Demo,突然发现了Layout_weight这个属性,发现网上有很多关于这个属性的有意思的讨论,可是找了好多资料都没有找到一个能够说的清楚的,于是自己结合网上资料研究了一下,终于迎刃而解,写出 ...

  2. 解决pwn题目加载指定libc版本的问题

    因为本地和远程的libc版本不同,pwn题目调试起来会有影响,所以来记录一下用patchelf和glibc-all-in-one来解决这个问题过程. 下载工具 下载patchelfgit clone ...

  3. HSPICE与非门仿真

    一.HSPICE的基本操作过程 打开HSPICE程序,通过OPEN打开编写好的网表文件. 按下SIMULATE进行网表文件的仿真. 按下AVANWAVES查看波形图(仿真结果). 二. 网表文件结构总 ...

  4. CF1166A Silent Classroom 题解

    Content 现在有 \(n\) 名学生,我们需要将这些学生分到两个班上.对于两名在同一班级的学生,如果他们的名字首字母相同,他们就会聊天. 现在给定这些学生的名字,问最少有多少对学生会在一起聊天. ...

  5. RabbitMQ 消息队列 实现RPC 远程过程调用交互

    #!/usr/bin/env python # Author:Zhangmingda import pika,time import uuid class FibonacciRpcClient(obj ...

  6. AcWing429. 奖学金

    题目: 某小学最近得到了一笔赞助,打算拿出其中一部分为学习成绩优秀的前5名学生发奖学金. 期末,每个学生都有3门课的成绩:语文.数学.英语. 先按总分从高到低排序,如果两个同学总分相同,再按语文成绩从 ...

  7. BitBake使用攻略--BitBake的语法知识一

    目录 写在前面 1. BitBake中的赋值 1.1 直接赋值 1.2 间接赋值 1.3 追加与前加赋值 1.4 Override风格的赋值语法 1.5 标志赋值 1.6 内联函数赋值 1.7 其他一 ...

  8. CMake之常用内置变量和message用法

    关于 cmake 定义了相当丰富的变量,然而,我常用的也就那几个 脑子笨,记不住变量的值时,我会使用cmake的message函数输出变量值 为什么要写这个? 最近尝试使用Modern CMake, ...

  9. 【LeetCode】60. Permutation Sequence 解题报告（Python & C++）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...

  10. Docker 与 K8S学习笔记（四）—— Dockerfile的编写

    在上一篇中我们简单介绍了Docker镜像的获取与使用,其中在镜像制作中提到在实际使用中一定要用Dockerfile方式去创建镜像而不要用docker commit方式,那么我们该如何编写Dockerf ...