nuxt 核心知识梳理
分类专栏: Javascript&
简介 想知道nuxt结构,这里就能告诉你
<div style="background-color: #ffffff; font-family: 'Fira Code', Consolas, 'Courier New', monospace; font-size: 20px; line-height: 27px; white-space: pre;">
<div> </div>
<br />
<div><span style="color: #800000; font-weight: bold;">### 创建一个项目</span></div>
<br />
<div><span style="color: #800000; font-weight: bold;">#### </span><span style="color: #000080; font-weight: bold;">**使用Nuxt脚手架工具**</span></div>
<br />
<div>```javascript</div>
<div>$ npx create-nuxt-app <project-name></div>
<div>$ cd <project-name></div>
<div>$ npm install <span style="color: #008000;">// 安装依赖</span></div>
<div>$ npm run dev <span style="color: #008000;">// 启动项目</span></div>
<div>```</div>
<br /><br /><br />
<div><span style="color: #800000; font-weight: bold;">#### </span><span style="color: #000080; font-weight: bold;">**初始化**</span></div>
<br />
<div>```json</div>
<div><span style="color: #008000;">// package.json</span></div>
<div>{</div>
<div> <span style="color: #0451a5;">"name"</span>: <span style="color: #a31515;">"my-app"</span>,</div>
<div> <span style="color: #0451a5;">"scripts"</span>: {</div>
<div> <span style="color: #0451a5;">"dev"</span>: <span style="color: #a31515;">"nuxt"</span></div>
<div> }</div>
<div>}</div>
<div>```</div>
<br />
<div>```javascript</div>
<div><span style="color: #008000;">// 安装nuxt并保存在package.json中</span></div>
<div>$ npm install --save nuxt</div>
<div><span style="color: #008000;">// 运行nuxt脚本 | 启动应用</span></div>
<div>$ npm run dev</div>
<div>```</div>
<br /><br /><br />
<div><span style="color: #800000; font-weight: bold;">### 目录结构</span></div>
<br />
<div><span style="color: #0451a5;">*</span> assets - 未编译的静态资源(比如 Less / Sass)</div>
<div><span style="color: #0451a5;">*</span> static - 静态文件 (比如robot.txt)</div>
<div><span style="color: #0451a5;">*</span> components - 业务组件</div>
<div><span style="color: #0451a5;">*</span> layouts - 应用程序布局</div>
<div><span style="color: #0451a5;">*</span> middleware - 中间件</div>
<div><span style="color: #0451a5;">*</span> pages - 动态路由生成器生成的应用程序视图和路由</div>
<div><span style="color: #0451a5;">*</span> plugins - 在Vuejs初始化之前运行的插件</div>
<div><span style="color: #0451a5;">*</span> store - Vuex的Store文件</div>
<br />
<div><span style="color: #0451a5;">></span> 注意,在 nuxt 应用中,所有的目录都是在根目录下,无 router 目录,路由由 Nuxt 自动产生</div>
<br /><br /><br />
<div><span style="color: #800000; font-weight: bold;">### 页面 pages</span></div>
<br />
<div>Nuxt读取pages目录中的文件树,以创建应用程序的路由:</div>
<br />
<div>```javascrpt</div>
<div>|-pages</div>
<div>|-|-index.vue // 根路径时加载</div>
<div>|-|-users</div>
<div>|-|-|-index.vue // /users路径时加载</div>
<div>|-|-|-_id.vue // _使用参数/users/123定义动态路由</div>
<div>```</div>
<br /><br /><br />
<div><span style="color: #800000; font-weight: bold;">### 页面中关键属性</span></div>
<br />
<div>```javascript</div>
<div><span style="color: #0000ff;">export</span> <span style="color: #0000ff;">default</span> {</div>
<div> asyncData (context) {</div>
<div> <span style="color: #0000ff;">return</span></div>
<div> axios.get(<span style="color: #a31515;">`https://my-api/posts/</span><span style="color: #0000ff;">${</span>context.params.id<span style="color: #0000ff;">}</span><span style="color: #a31515;">`</span>)</div>
<div> .then((res) <span style="color: #0000ff;">=></span> {</div>
<div> <span style="color: #0000ff;">return</span> { title: res.data.title }</div>
<div> })</div>
<div> },</div>
<div> fetch (context) {</div>
<div> <span style="color: #0000ff;">return</span> axios.get(<span style="color: #a31515;">'http://my-api/stars'</span>).then((res)<span style="color: #0000ff;">=></span> {</div>
<div> context.store.commit(<span style="color: #a31515;">'setStars'</span>, res.data)</div>
<div> })</div>
<div> },</div>
<div> head () { <span style="color: #008000;">// 使用vue-meta为当前页设置html头部标签</span></div>
<div> <span style="color: #0000ff;">return</span> {</div>
<div> title: <span style="color: #0000ff;">this</span>.title, <span style="color: #008000;">// 此处可获取组件的数据</span></div>
<div> meta: [</div>
<div> { hid: <span style="color: #a31515;">'description'</span>, name: <span style="color: #a31515;">'description'</span>,</div>
<div> content: <span style="color: #a31515;">'My custom description'</span> }</div>
<div> ]</div>
<div> layout: <span style="color: #a31515;">'my-custom-layout'</span>, <span style="color: #008000;">// 选择页面的自定义的布局</span></div>
<div> validate (context) { <span style="color: #008000;">// 如果是false,Nuxts将加载错误页面。</span></div>
<div> <span style="color: #0000ff;">return</span><span style="color: #811f3f;"> /</span><span style="color: #0000ff;">^</span><span style="color: #811f3f;">\\d</span>+<span style="color: #0000ff;">$</span><span style="color: #811f3f;">/</span>.test(context.params.id) <span style="color: #008000;">// 必须是个数字 }, transition: { // 自定义当前页面的动画</span></div>
<div> name: <span style="color: #a31515;">'my-custom-transition'</span>,</div>
<div> mode: <span style="color: #a31515;">'out-in'</span></div>
<div> }</div>
<div> }</div>
<br />
<div>```</div>
<br /><br /><br />
<div><span style="color: #800000; font-weight: bold;">### NUXT 组件</span></div>
<br />
<div>使用<span style="color: #800000;">`<nuxt-link>`</span>作为页面的导航组件。</div>
<br />
<div>```html</div>
<div><span style="color: #800000;"><nuxt-link</span> <span style="color: #ff0000;">v-bind:to</span>=<span style="color: #0000ff;">"'/users' + user.name"</span> <span style="color: #800000;">></span>{{ user.fullName }}'s Profile<span style="color: #800000;"></nuxt-link></span></div>
<div>```</div>
<br />
<div>使用<span style="color: #800000;">`<nuxt-child />`</span>在嵌套路由中显示子组件路由。</div>
<br />
<div>```html</div>
<div><span style="color: #800000;"><template></span></div>
<div> <span style="color: #800000;"><div></span></div>
<div> <span style="color: #800000;"><h1></span>I am the parent view<span style="color: #800000;"></h1></span></div>
<div> <span style="color: #800000;"><nuxt-child</span> <span style="color: #800000;">/></span></div>
<div> <span style="color: #800000;"></div></span></div>
<div><span style="color: #800000;"></template></span></div>
<div>```</div>
<br /><br /><br />
<div><span style="color: #800000; font-weight: bold;">### 布局 layout</span></div>
<br />
<div>在<span style="color: #800000;">`layouts`</span>目录下创建应用布局。使用<span style="color: #800000;">`<nuxt />`</span>组件展示页面主体内容。</div>
<br />
<div>```html</div>
<div>// layouts/my-custom-layout.vue</div>
<div><span style="color: #800000;"><template></span></div>
<div> <span style="color: #800000;"><div</span> <span style="color: #ff0000;">class</span>=<span style="color: #0000ff;">"container"</span><span style="color: #800000;">></span></div>
<div> <span style="color: #800000;"><</span><span style="color: #cd3131;">nuxt</span><span style="color: #800000;"> /></span></div>
<div> <span style="color: #800000;"></div></span></div>
<div><span style="color: #800000;"></template></span></div>
<div>```</div>
<br /><br /><br />
<div><span style="color: #800000; font-weight: bold;">### 错误页面</span></div>
<br />
<div>通过编辑<span style="color: #800000;">`layouts/error.vue`</span>来定制化错误页面。请勿在页面模板中包含<span style="color: #800000;">`<nuxt />`</span>标签。</div>
<br />
<div>```html</div>
<div> <span style="color: #800000;"><template></span></div>
<div> <span style="color: #800000;"><h1</span> <span style="color: #ff0000;">v-if</span>=<span style="color: #0000ff;">"error.statusCode === 404"</span><span style="color: #800000;">></span></div>
<div> Page not found</div>
<div> <span style="color: #800000;"></h1></span></div>
<div> <span style="color: #800000;"><h1</span> <span style="color: #ff0000;">v-else</span><span style="color: #800000;">></span>An error occurred<span style="color: #800000;"></h1></span></div>
<div> <span style="color: #800000;"><nuxt-link</span> <span style="color: #ff0000;">to</span>=<span style="color: #0000ff;">"/"</span><span style="color: #800000;">></span>Home page<span style="color: #800000;"></nuxt-link></span></div>
<div><span style="color: #800000;"></template></span></div>
<div><span style="color: #800000;"><script></span></div>
<div> <span style="color: #0000ff;">export</span> <span style="color: #0000ff;">default</span> {</div>
<div> props: [<span style="color: #a31515;">'error'</span>],</div>
<div> layout: <span style="color: #a31515;">'my-error-layout'</span></div>
<div> } <span style="color: #008000;">// 你可以为错误页面指定自定义的布局</span></div>
<div><span style="color: #800000;"></script></span></div>
<div>```</div>
<br /><br /><br />
<div><span style="color: #800000; font-weight: bold;">### 引用文件的别名</span></div>
<br />
<div>通过<span style="color: #800000;">`〜`</span>引用资源目录</div>
<br />
<div>```html</div>
<div><span style="color: #800000;"><template></span></div>
<div> <span style="color: #800000;"><img</span> <span style="color: #ff0000;">src</span>=<span style="color: #0000ff;">"~/assets/your_image.png"</span><span style="color: #800000;">/></span></div>
<div><span style="color: #800000;"></template></span></div>
<div><span style="color: #800000;"><script></span></div>
<div><span style="color: #0000ff;">import</span> Visits <span style="color: #0000ff;">from</span> <span style="color: #a31515;">'~/components/Visits'</span></div>
<div><span style="color: #0000ff;">export</span> <span style="color: #0000ff;">default</span> {</div>
<div> components: { Visits }</div>
<div>}</div>
<div><span style="color: #800000;"></script></span></div>
<div> </div>
<div>```</div>
<br /><br /><br />
<div><span style="color: #800000; font-weight: bold;">### 状态管理 vuex</span></div>
<br />
<div>如果<span style="color: #800000;">`store`</span>文件夹中有index.js文件,说明Nuxt已经自动将Vuex添加到您的项目中。该文件必须export一个返回Vuex实例的方法。</div>
<br />
<div>现在你可以在组件内部使用<span style="color: #800000;">`this.$store`</span>。</div>
<br />
<div>```html</div>
<div><span style="color: #800000;"><template></span></div>
<div> <span style="color: #800000;"><button</span> <span style="color: #ff0000;">@click</span>=<span style="color: #0000ff;">"$store.commit('increment')"</span><span style="color: #800000;">></span></div>
<div> {{ $store.state.counter }}</div>
<div> <span style="color: #800000;"></button></span></div>
<div><span style="color: #800000;"></template></span></div>
<div>```</div>
<br /><br /><br />
<div><span style="color: #800000; font-weight: bold;">### 公共配置 nuxt.config.js</span></div>
<br />
<div>用于配置您的应用</div>
<br />
<div>```javascript</div>
<div><span style="color: #0000ff;">export</span> <span style="color: #0000ff;">default</span> {</div>
<div> css: [</div>
<div> <span style="color: #008000;">// 添加全局的css文件</span></div>
<div> <span style="color: #a31515;">'bulma/css/bulma.css'</span>,</div>
<div> <span style="color: #a31515;">'~/css/main.css'</span></div>
<div> ],</div>
<div> <span style="color: #008000;">// 在这里指定要从动态路由生成静态页面</span></div>
<div> generate: {</div>
<div> routes: <span style="color: #0000ff;">function</span> () {</div>
<div> <span style="color: #0000ff;">return</span> [</div>
<div> <span style="color: #a31515;">'/users/1'</span>,</div>
<div> <span style="color: #a31515;">'/users/2'</span>,</div>
<div> <span style="color: #a31515;">'/users/3'</span></div>
<div> ];</div>
<div> }</div>
<div> },</div>
<div> <span style="color: #008000;">// 自定义loading组件</span></div>
<div> loading: <span style="color: #a31515;">'~/components/loading.vue'</span>,</div>
<div> <span style="color: #008000;">// 设置每个页面的html头部标签</span></div>
<div> head: {</div>
<div> meta: [</div>
<div> { charset: <span style="color: #a31515;">'utf-8'</span> },</div>
<div> { name: <span style="color: #a31515;">'viewport'</span>, content:</div>
<div> <span style="color: #a31515;">'width=device-width, initial-scale=1'</span> }</div>
<div> ],</div>
<div> link: [{</div>
<div> rel: <span style="color: #a31515;">'stylesheet'</span>,</div>
<div> href: <span style="color: #a31515;">'https://font.com'</span>,</div>
<div> }]</div>
<div> },</div>
<div> <span style="color: #008000;">// 设置每个页面的默认动画</span></div>
<div> transition: {</div>
<div> name: <span style="color: #a31515;">'page’</span><span style="color: #cd3131;">,</span></div>
<div> mode: <span style="color: #a31515;">'out-in'</span></div>
<div> },</div>
<div> plugins: [<span style="color: #a31515;">'~/plugins/vue-notifications'</span>]</div>
<div>}</div>
<br />
<div>```</div>
<br /><br /><br />
<div><span style="color: #800000; font-weight: bold;">### 部署</span></div>
<br />
<div><span style="color: #800000; font-weight: bold;">#### 1.单页面应用程序部署(SPA)</span></div>
<br />
<div><span style="color: #000080; font-weight: bold;">**优势**</span>: 使用默认的目录结构和配置文件来配置你的项目.简化服务开发.</div>
<br />
<div><span style="color: #0451a5;">*</span> 将<span style="color: #800000;">`nuxt.config.js`</span>中的<span style="color: #800000;">`mode`</span>更改为 <span style="color: #800000;">`spa`</span>.</div>
<div><span style="color: #0451a5;">*</span> 运行<span style="color: #800000;">`npm run build`</span>.</div>
<div><span style="color: #0451a5;">*</span> 将创建的 <span style="color: #800000;">`dist/`</span> 目录部署到你的静态站点主机上,例如GitHub Pages.</div>
<br />
<div><span style="color: #800000; font-weight: bold;">#### 2.静态应用部署(STATIC)</span></div>
<br />
<div><span style="color: #000080; font-weight: bold;">**优势**</span>: 所有的页面都会预渲染为HTML,并具有较高的SEO优化和页面加载能力.内容在构建时生成. </div>
<br />
<div><span style="color: #0451a5;">*</span> 运行<span style="color: #800000;">`npm run generate`</span></div>
<div><span style="color: #0451a5;">*</span> 将创建的包含所有生成的HTML文件和静态资源的<span style="color: #800000;">`dist/`</span>文件夹部署到你的静态站点主机上.</div>
<br />
<div><span style="color: #800000; font-weight: bold;">#### 3.常规的服务端渲染应用部署(UNIVERSAL)</span></div>
<br />
<div><span style="color: #000080; font-weight: bold;">**优势**</span>: 你可以同时在服务端和客户端执行你的JavaScript文件.所有的路由都具有较高的SEO优化和页面加载能力.</div>
<div>动态获取发送到客户端之前在服务器上呈现的路由.</div>
<br />
<div><span style="color: #0451a5;">*</span> 将应用程序的内容上载到你选择的服务器上.</div>
<div><span style="color: #0451a5;">*</span> 运行<span style="color: #800000;">`nuxt build`</span> 来构建你的应用.</div>
<div><span style="color: #0451a5;">*</span> 运行<span style="color: #800000;">`nuxt start`</span> 来启动你的应用并开始接收请求.</div>
<br /><br /><br />
<div><span style="color: #800000; font-weight: bold;">### 运行和构建</span></div>
<br />
<div>```shell</div>
<div>$ nuxt <span style="color: #008000;"># 启动一个热加载的Web服务器(开发模式) localhost:3000</span></div>
<div>$ nuxt generate <span style="color: #008000;"># 编译应用,并依据路由配置生成对应的HTML文件</span></div>
<div>$ nuxt build <span style="color: #008000;"># 利用webpack编译应用,压缩assets下的资源</span></div>
<div>$ nuxt start <span style="color: #008000;"># 以生产模式启动一个Web服务器</span></div>
<div>```</div>
</div>
分享到:
转载:
喜欢 1
收藏
暂无评论信息
- 相关文章
- 文章推荐
-
淘宝 NPM 镜像站喊你切换新域名啦
淘宝 NPM 镜像站(npm.taobao.org)自 2014 年 正式对外服务,一开始只是想简单地做 NPM 的中国镜像站点,回馈国内前端社区,不知不觉竟然一直运行到现在。当年参考 Ruby Gems 淘宝镜像 的方式,跟阿里开源组织申请了 taobao.org 的二级域名,镜像站点名称也自然而然地取名为 淘宝 NPM 镜像站 (下称 CNPM)。
-
群辉nas docker容器 配置svn仓库,并实现外网访问
2022-08-11的这一天, 群辉nas到手了, 实现svn仓库外网的访问,折腾了好久。记录一下。
-
乐视官方确认还有 400 多人:消息称员工“没有内卷和 996”,过着“没有老板”的神仙日子
7 月 11 日消息,近期,微博博主 @Fenng 分享了一个冷知识:乐视居然还剩下 400 多人,有不少是五年以上的老员工。这些老员工称“幸福感是很多老乐视人留下来的理由”,没有内卷和 996,没拖欠过留下来的员工的工资,也没停过社保。
-
亚马逊推出“无需收银员”的新技术,以此帮助品牌和广告商提高销量
北京时间 6 月 30 日早间消息,据报道,亚马逊发明了一种无需收银员的技术,可以加快人们去杂货店或便利店的速度。现在,该公司希望利用这个跟踪系统来帮助品牌和广告商提高销量。&
- 点击排行
- 站长推荐
- 猜你喜欢
- 网站信息
- 站内问答:12篇
- 站内文章:213篇
- 建站时间:已运行1243天
- 备案号: 浙ICP备2022018799号
- 语言:
- English(USA)
- French(FR)
- Chinese(ZH)
无数据