门户网站后台建设模块,网页设计特效网站,十大免费自助建站,wordpress 登陆页面前言 从最开始学习web网页开始#xff0c;搭建一个网页只需要创建一个html文件对其进行编写dom标签语言即可#xff1b;后来分离了html#xff0c;css和js#xff0c;搭建一个网页开始需要文件夹#xff0c;文件夹包含了这3类文件以及静态文件#xff0c;图片#xff0c…前言 从最开始学习web网页开始搭建一个网页只需要创建一个html文件对其进行编写dom标签语言即可后来分离了htmlcss和js搭建一个网页开始需要文件夹文件夹包含了这3类文件以及静态文件图片音频视频...... 到现在开始使用工程化框架搭建网页vuereact还有相关的打包工具webpackvue-clivite这个转变使得构建的网页功能更加强大结构更加复杂精细 那么这个工程化的过程是怎么变化的从一个html到modulesrcjsonconfig.js
开始 使用的构建工具vite需要安装的包vitevuevitejs/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
templatedivhello world/div
/templateindex.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlemyVue/title
/head
bodydiv idapp/div!-- 引入入口js文件 --script typemodule 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-vueexport default defineConfig({plugins: [// 使用vite构建vue的插件vue(),],
})
注意这个js文件的作用是提供本地服务搭建vue类似后端的代码它实在命令行执行的 运行一下项目可以看到命令行执行这个js的结果插件就是一个可执行的函数
7.运行项目
配置完以上的文件就可以运行项目了上面已经运行成功了一次
npm run dev
点击这个链接查看项目 成功显示结果到此一个简单的vue项目就搭建完成了 结语 但在真实的项目中仅仅只有这些配置还远远不够开发时使用脚手架搭建可以快速的让我们编辑项目核心的代码这里只是展示一个vue项目是如何产生的深化对vue框架的了解
