莆田网站建设方案优化,网站程序h5,宁波公司网站开发,国际网站推广专员招聘文章目录 初识 create-vuecreate-vue新建项目Vue.js 3 项目目录结构项目的运行和打包vite.config.js文件解析其他#xff1a;webpack和Vite的区别 初识 create-vue
create-vue类似于Vue CLI脚手架#xff0c;可以快速创建vuejs 3项目#xff0c;create-vue基于Vite。Vite支… 文章目录 初识 create-vuecreate-vue新建项目Vue.js 3 项目目录结构项目的运行和打包vite.config.js文件解析其他webpack和Vite的区别 初识 create-vue
create-vue类似于Vue CLI脚手架可以快速创建vuejs 3项目create-vue基于Vite。Vite支持Vue CLI中的大多数配置并且Vite以极速启动服务、快如闪电的热重载提供了更好的开发体验。
与Vue CLI 不同的是create-vue脚手架会根据你选择的功能创建一个预配置的项目然后将其余部分委托给Vite。 注意create-vue脚手架要求Node.js版本大于16。 create-vue新建项目
create-vue脚手架创建vue3版本项目有两种常见的方式。
1.全局安装create-vue脚手架
npm i create-vuelatest -g使用create-vue命令创建Vue.js 3 项目。
创建项目命令
create-vue createapp-vue3demo其中createapp-vue3demo是项目名称。
2.局部安装create-vue脚手架
npm init vuelatest这里执行npm init vuelatest的意思
临时安装create-vuelatest脚手架注意不是全局安装安装完成后立即执行create-vue命令来创建项目
在VScode终端执行npm init vuelatest命令创建一个如02-createapp-demo项目如下所示(示例代码都选择了否实际项目中根据需要选择相应的功能)
请输入项目名称 ... createapp_demo
√ 是否使用 TypeScript 语法 ... 否 / 是
√ 是否启用 JSX 支持 ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发 ... 否 / 是
√ 是否引入 Pinia 用于状态管理 ... 否 / 是
√ 是否引入 Vitest 用于单元测试 ... 否 / 是
√ 是否要引入一款端到端End to End测试工具 » 不需要
√ 是否引入 ESLint 用于代码质量检测 ... 否 / 是Vue.js 3 项目目录结构
createapp_demo/ # 项目的名称命名规范建议统一小写多个单词使用下划线分割
|-- public/ # 静态资源目录
| |-- favicon.ico # 网站图标
|-- src/ # 源代码目录
| |-- assets/ # 存放静态资源如图片、字体等
| |-- components/ # 可复用的 Vue 组件目录
| |-- views/ # 页面目录存放路由对应的组件
| |-- App.vue # 根组件
| |-- main.js # 项目的入口文件
| |-- main.ts # TypeScript 版本的入口文件如果选择了 TypeScript
|-- tsconfig.json # TypeScript 配置文件如果选择了 TypeScript
|-- .gitignore # Git 忽略的文件和目录
|-- index.html # 项目的入口 HTML 文件
|-- package.json # 项目的元数据和依赖信息
|-- package-lock.json # npm 依赖锁定文件
|-- vite.config.js # Vite 配置文件
|-- README.md # 项目说明文件项目的运行和打包
dev: vite,
build: vite build,
preview: vite preview说明
dev启动项目的本地运行脚本build打包项目的脚本preview预览编译后的项目的脚本
vite.config.js文件解析
与Vue CLI相同create-vue脚手架也提供了一些常用的配置方便我们进行扩展和自定义。这些配置包括outDir、assetsDir、alias、base和server等。
vite.config.js默认的配置代码如下
import { fileURLToPath, URL } from node:urlimport { defineConfig } from vite
import vue from vitejs/plugin-vue// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),],resolve: {alias: {: fileURLToPath(new URL(./src, import.meta.url))}}
})1.outDir指定打包输出的目录名称默认是dist与vue.config.js中的outputDir功能相同。
export default defineConfig({......build: {outDir: build}
})
2.assetsDir用于指定静态资源存放的目录默认是assets与vue.config.js中的assetsDir功能相同。
项目代码编译后index.html引入资源默认情况如下
script typemodule crossorigin src/assets/index-BEb411hP.js/script
link relstylesheet crossorigin href/assets/index-BaMTLMsk.css配置
export default defineConfig({......build: {outDir: build,assetsDir: static // 指定静态资源存放目录相对于build.outDir默认是assets}
})上面配置调整后index.html引入资源情况如下
script typemodule crossorigin src/static/index-lKLvkvL0.js/script
link relstylesheet crossorigin href/static/index-BaMTLMsk.css3.base用于指定开发或者生产的公共基础路径即指定引用资源的前缀与vue.config.js中的publicPath功能相同代码如下
export default defineConfig({base: ./
})base属性支持
- 绝对URL路径如/my-app/
- 完整URL如http://it.com/;
- 用于开发或者生产环境的空字符串或./4.alias用于为导包的路径设置别名与vue.config.js中的alias功能相同示例代码如下
export default defineConfig({.......resolve: {alias: {: fileURLToPath(new URL(./src, import.meta.url)),components: fileURLToPath(new URL(./src/components, import.meta.url))}},......
})引入HelloWorld组件就有如下三种方式
import HelloWorld from ./components/HelloWorld.vue
import HelloWorld from /components/HelloWorld.vue
import HelloWorld from components/HelloWorld.vue5.server用于开发环境设置服务器选项
示例
import { defineConfig } from vite;// https://vitejs.dev/config/
export default defineConfig({server: {host: localhost,port: 8081,open: true,proxy: {},},
});
其他webpack和Vite的区别
Vue CLI是基于webpack实现的而create-vue是基于vite实现的。
主要区别
在打包应用程序时webpack会生成一个依赖关系图。该依赖关系图中含有应用程序所需要的所有模块然后遍历图结构编译一个个模块当某个模块有变化时相关依赖模块需要全部编译一次。项目越复杂、模块越多打包速度就越慢。Vite利用ES Module 可以自动发起请求的特性在打包应用程序时Vite不需要分析模块的依赖也不需要编译。当浏览器请求某个模块时再按需对模块内容进行编译这种按需动态编译的方式大幅度减少了编译时间。因此Vite的启动速度非常快比JavaScript编写的打包器预构建依赖的速度快10倍到100倍项目越复杂、模块越多。Vite 天然支持打包TypeScript、JSX、CSS等文件而webpack需要安装对应的Loader进行处理。webpack支持开发和生产环境打包Vite在打包生产环境时需要使用RollupVite的主要优势体现在开发阶段。webpack无论是自身优势还是生态都非常强大使用者非常多而Vite的整个社区生态正在快速完善。 说明ES Module 是 JavaScript 的官方模块化标准它允许开发者通过import和 export 语句来组织和分享代码。特别地ES Module 支持动态导入即使用 import() 函数来异步地加载一个模块。这种动态导入的特性为 Vite 提供了按需编译的基础。 注意事项
虽然 Vite 的按需编译策略在开发过程中非常有效但在生产环境中通常仍然需要静态地分析和打包代码以确保最佳的加载性能和兼容性。因此Vite 提供了构建命令用于在生产环境中生成优化过的代码 bundle。在企业生产环境中建议优先选择 Vue CLI脚手架因为 webpack 经过多年发展已经非常稳定社区生态也非常成熟。
