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. vue-cli4结合element-ui异常解决(前端小白，文摘取自网络)

    1:将vue-cli4版本退回到vue-cli3 2:使用element-plus 替换 element-ui 传送门 => https://element-plus.gitee.io/#/zh ...

  2. get_started_3dsctf_2016 1

    拿到题目,依旧还是老样子,查看程序开启的保护和位数 可以看到程序开启了nx保护是32位程序,于是我们把程序放入ida32编译一下 一打开就能看到非常明显的get_flag这个程序,f5观察伪代码 当a ...

  3. [BUUCTF]REVERSE——[BJDCTF2020]JustRE

    [BJDCTF2020]JustRE 附件 步骤: 例行查壳儿,无壳儿,32位程序 32位ida载入,main函数没看懂,shift+f12检索了一下程序里的字符串,发现了一个类似于flag的字符串 ...

  4. tomcat架构分析及配置详解

    浏览器访问服务器的流程 请求发起的过程: 注意:浏览器访问服务器使用的是http协议,http是应用层协议,而具体传输还是使用的TCP/IP协议 Tomcat系统总架构 2.1 Tomcat请求处理过 ...

  5. MM函数（Excel函数集团）

    此处文章均为本妖原创,供下载.学习.探讨! 文章下载源是Office365国内版1Driver,如有链接问题请联系我. 请勿用于商业!谢谢 下载地址:https://officecommunity-m ...

  6. CF1166A Silent Classroom 题解

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

  7. 制作一个文档同步工具，自动同步到gitee中。。。

    之所以要做这个工具是为了让自己可以随时用电脑时能记录日常工作或生活.一般只需要简单记录下就行了.这样我在家里的和公司里的记录都能同步看到. 这样后期整理的时候看到几个关键词就能想起来具体的事情,有的也 ...

  8. cmake之错误【Modules/ExternalProject.cmake:3206 (_ep_add_download_command)....】

    本文的 cmake的version是3.18 本文环境: Ubuntu 64 + CMAKE 3.18 错误描述 1.错误内容 Modules/ExternalProject.cmake:3206 ( ...

  9. 【LeetCode】359. Logger Rate Limiter 解题报告(C++)

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

  10. 【九度OJ】题目1474：矩阵幂 解题报告

    [九度OJ]题目1474:矩阵幂 解题报告 标签(空格分隔): 九度OJ http://ac.jobdu.com/problem.php?pid=1474 题目描述: 给定一个n*n的矩阵,求该矩阵的 ...