Nuxt3 持续学习 -- 【快速创建一个 Nuxt3 项目】

news/2024/7/10 0:40:57 标签: vue

创建项目

打开一个终端,或从Visual Studio Code打开一个集成终端,并使用以下命令创建一个新的启动器项目:

npx nuxi init nuxt3-app

注:node 版本需要高于 v14.16.0

进入项目文件夹安装依赖

yarn install

启动服务

yarn dev -o

浏览器会自动打开:http://localhost:3000

在nuxt3中如果没有pages/目录,则表示不会包含vue-router依赖。如果我们不需要路由或者就是一个落地页时就可以这么搞。

下面删除app.vue中,随便添点内容看看效果。

ps: 想学习Nuxt3 的童鞋 可以去B站搜前端杨村长,我最近在看村长出的教程非常好有兴趣的童鞋可以去看看。


http://www.niftyadmin.cn/n/1162886.html

相关文章

Nuxt3 -- 路由篇

普通路由 nuxt3会自动整合vue-router,并且映射pages/目录到应用的routes配置中。 [{path: /,component: ~/pages/index.vue,name: index,} ]动态路由 如果我们在文件名或者文件夹名称里面包含了方括号,它们将被转换为动态路由参数。 -| pages/ ---| …

Nuxt3--布局模板

默认布局 那些放在layouts/目录下的.vue文件会被自动加载进来&#xff0c;如果我们创建的.vue名为default.vue&#xff0c;将会被用于项目所有页面中作为布局模板。 layouts/default.vue&#xff1a; <template><div>default.vue:<slot /></div> &l…

Nuxt3 -- 组件 Components

相信大家在写组件的时候各种导入和注册操作重复去写肯定很烦&#xff0c;这点 Nuxt 中已经帮我们解决了&#xff0c;直接使用就行了。 自动导入组件 我们把Vue组件放在components/目录&#xff0c;这些组件可以被用在页面和其他组件中&#xff0c;以往我们使用这些组件需要导…

使用vue-cli3.0搭建适配移动端的项目

使用vue-cli3.0搭建适配移动端的项目 适配移动端&#xff0c;禁止用户缩放页面 meta标签中的content属性里有一个widthdevice-width的值&#xff0c;这个值就是用来告诉浏览器&#xff0c;该页面将要使用设备的宽度来解析&#xff0c;后面的属性值则是告诉该页面&#xff1a;…

vue 移动端 cli3.0 build 打包低版本浏览器兼容性

现代模式 有了 Babel 我们可以兼顾所有最新的 ES2015 语言特性&#xff0c;但也意味着我们需要交付转译和 polyfill 后的包以支持旧浏览器。这些转译后的包通常都比原生的 ES2015 代码会更冗长&#xff0c;运行更慢。现如今绝大多数现代浏览器都已经支持了原生的 ES2015&#…

vue 使用 vue-meta-info 设置每个页面的 title 和 meta 信息

如需使用 vue-meta-info 配置title和meta按照以下步骤&#xff1a; 1.安装 npm install vue-meta-info --save2.在main.js引入 import MetaInfo from vue-meta-info Vue.use(MetaInfo)3.在vue页面配置 <template>... </template><script>export default …

数组函数forEach()、map()、filter()、includes()、find()、every()、some()的使用

1. forEach() 遍历数组全部元素&#xff0c;利用回调函数对数组进行操作&#xff0c;自动遍历数组.length次数 示例&#xff1a; var arr [6, 5, 4];var total 0;arr.forEach(function(value, index, arr) {console.log(当前值&#xff1a; value);console.log(当前值对应…

采集服务器配置及软件安装

采集服务器配置及软件安装 一、IP配置二、node-red安装配置三、emqx安装配置四、tdengine安装配置 一、IP配置 服务器配置静态IP 二、node-red安装配置 centos通过源文件的方式安装node-red 三、emqx安装配置 V5.0.X版本 EMQX安装、卸载 以及使用 四、tdengine安装配置 …