从0搭建一个vue项目，不使用脚手架从html到vue

前言

从最开始学习web网页开始，搭建一个网页只需要创建一个html文件对其进行编写dom标签语言即可；后来分离了html，css和js，搭建一个网页开始需要文件夹，文件夹包含了这3类文件以及静态文件，图片，音频，视频......

到现在开始使用工程化框架搭建网页，vue，react，还有相关的打包工具webpack，vue-cli，vite，这个转变使得构建的网页，功能更加强大，结构更加复杂精细，

那么这个工程化的过程是怎么变化的，从一个html，到module，src，json，config.js，

开始

使用的构建工具：vite
需要安装的包：vite，vue，@vitejs/plugin-vue
手动生成的文件：index.html, main.js, vite.config.js, App.vue

1.新建一个文件夹

新建一个文件夹，然后用vscode打开这个文件夹

在文件夹下新建一个README.md文件（非必要），这里可以添加一些项目描述，

2.新建index.html

添加一个id为app的盒子作为整个项目的容器，

3.npm初始化

打开终端输入npm指令

npm init -y

这会在文件夹下自动生成一个package.json文件，这是整个项目的核心文件，里面包含了项目中的关键信息，

其中，description字段就是初始化前README.md中的内容，name字段是项目（文件夹）名称，script字段是脚本命令

4.安装相关配置包

执行以下npm命令

npm install vite -D安装vite工具，-D表示安装在开发环境依赖npm install vue安装vue包npm install @vitejs/plugin-vue安装vite构建vue的插件

安装完后，整体产生了3个变化，json文件中多了生产环境（dependencies）和开发环境（devDependencies）的依赖字段，多了一个package-lock.json文件和node_modules文件夹，内部包含了项目相关的支持文件

5.构建项目结构

项目下新建一个src文件夹，并在src下新建main.js和App.vue，新建一个vite.config.js文件

6.书写相关文件的内容

先从src中开始，

main.js

import { createApp } from "vue";
import App from "./App.vue";const app = createApp(App);//注册vue的app实例
app.mount("#app");//将实例挂载到id为app的元素上

App.vue

<template><div>hello world</div>
</template>

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>myVue</title>
</head>
<body><div id="app"></div><!-- 引入入口js文件 --><script type="module" src="/src/main.js"></script>
</body>
</html>

package.json

主要修改以下两个字段：type，和scripts，可以删除main字段

  "type": "module","scripts": {"dev": "vite","build": "vite build","preview": "vite preview"},

{"name": "myvue","version": "1.0.0","description": "从零开始搭建一个vue项目","type": "module","scripts": {"dev": "vite","build": "vite build","preview": "vite preview"},"keywords": [],"author": "","license": "ISC","devDependencies": {"vite": "^5.3.1"},"dependencies": {"@vitejs/plugin-vue": "^5.0.5","vue": "^3.4.30"}
}

其中type字段是必要的（没有将产生错误），以下是官方原话，这表示采用模块化打包

scripts是脚本命令，作用分别是开发项目预览，打包项目，预览打包项目

vite.config.js

import { defineConfig } from "vite";
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [// 使用vite构建vue的插件vue(),],
})

注意这个js文件的作用是提供本地服务搭建vue（类似后端的代码），它实在命令行执行的

运行一下项目可以看到命令行执行这个js的结果，插件就是一个可执行的函数

7.运行项目

配置完以上的文件就可以运行项目了，上面已经运行成功了一次，

npm run dev

点击这个链接查看项目

成功显示结果，到此，一个简单的vue项目就搭建完成了，

结语

但在真实的项目中，仅仅只有这些配置还远远不够，开发时使用脚手架搭建可以快速的让我们编辑项目核心的代码，这里只是展示一个vue项目是如何产生的，深化对vue框架的了解

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/860560.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！