前端那些事之Nuxt.js

最新推荐文章于 2025-07-04 08:51:09 发布

转载最新推荐文章于 2025-07-04 08:51:09 发布 · 272 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/yongxinke/blog/1590764

文章标签：

#前端 #json #python #ViewUI

本文介绍了Nuxt.js的基本使用方法，并深入探讨了Jade模板语言的语法特性及其实例应用，包括变量声明、数据传递、条件语句、循环、mixin函数等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

Nuxt.js 官网 nuxt.js官网

个基于 Vue.js 的服务端渲染应用框架

项目搭建

安装全局vue-cli

npm install -g vue-cli

利用vue-cli搭建nuxt项目

选用的是Koa框架  fire 是项目名称 
vue init nuxt/koa fire

启动项目

cd fire 
npm install 
npm run dev

jade的学习

安装全局的jade模板

npm install -g jade

jade 的实时编译(会实时编译)

jade -P -w index.jade

jade 的基础语法

doctype html
html
    //ie6,7,8
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->
<!--[if IE]><html class="ie"><![endif]-->
head
    meta(charset='utf-8')
    title jade study
body
    h2 注释
    //div 单行注释//
    section.title.title2#sectionID
    h2 非缓冲注释 //-
    //- #dkkdk
    h2 块注释
    //-
        div
            strong eb
            span dk
    div
        strong eb
        span dk
    h2 div是比较特别的标签 可以直接用#action.logo，可以不加div
    #action.logo
        a(href="#",id="logo",class="font") baidu
        input(type="text",name="jade",value="jade")
        input(type="checkbox",name="jade",checked)
        br
        p.
            1 kd
            1 kd
            1 kd
            1 kd
            1 kd
        br
        p
            | 1 dkk
            span dd
            | 1 dkk
            strong dkdkd
            | 1 dkk
            | 1 dkk
</html>

//编译以后

<!DOCTYPE html>
<html>
  <!--ie6,7,8-->
</html><!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->
<!--[if IE]><html class="ie"><![endif]-->
<head>
  <meta charset="utf-8">
  <title>jade study</title>
</head>
<body>
  <h2>注释</h2>
  <!--div 单行注释//-->
  <section id="sectionID" class="title title2"></section>
  <h2>非缓冲注释 //-</h2>
  <h2>块注释</h2>
  <div><strong>eb</strong><span>dk</span></div>
  <h2>div是比较特别的标签 可以直接用#action.logo，可以不加div</h2>
  <div id="action" class="logo"><a href="#" id="logo" class="font">baidu</a>
    <input type="text" name="jade" value="jade">
    <input type="checkbox" name="jade" checked><br>
    <p>
      1 kd
      1 kd
      1 kd
      1 kd
      1 kd
    </p><br>
    <p>1 dkk<span>dd</span>1 dkk<strong>dkdkd</strong>1 dkk
      1 dkk
    </p>
  </div>
</body></html>

jade的变量声明和数据传递

- var test = 'jade'
- let test = 'jade'
- const test = 'jade'
二种接收变理的方式
p #{test}
p = test

例如

doctype  html
html
    head
        meta(charset='utf-8')
        - var test = 'jade'
        title #{test.toUpperCase()}变量声明
    body
        - var tests = 'demo'
        - const demo = 'test'
        div#test #{tests}
            p = tests
            p = demo

解析以后

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JADE变量声明</title>
  </head>
  <body>
    <div id="test">demo
      <p>= tests</p>
      <p>= demo</p>
    </div>
  </body>
</html>

jade 数据传送（命令行和json格式和后端传输）
命令行传递数据

jade index1.jade -P -w -obj '{"demo":"jade03"}'

json数据传输

cd 指定目录下
jade index1.jade -P -w -O demo.json

数据传输的优先级（页面的变更> 传递过来的变量）
jade转义

doctype  html
html
    head
        meta(charset='utf-8')
        - var test = 'jade'
        title #{test.toUpperCase()}变量声明
    body
        - var tests = 'demo'
        - let htmlData= '<script>alert(1)</script><span>script</span>'
        div#test #{tests}
            p #{htmlData}
            p !{htmlData}
            p = htmlData
            p != htmlData
            //如果要输出#{htmlData}或者!{htmlData}格式
            p \#{htmlData}
            p \!{htmlData}
            //不出现undefind
            input(value=newData)

转义以后

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JADE变量声明</title>
  </head>
  <body>
    <div id="test">demo
      <p>&lt;script&gt;alert(1)&lt;/script&gt;&lt;span&gt;script&lt;/span&gt;</p>
      <p><script>alert(1)</script><span>script</span></p>
      <p>= htmlData</p>
      <p>!= htmlData</p>
      <!--如果要输出#{htmlData}或者!{htmlData}格式-->
      <p>#{htmlData}</p>
      <p>!{htmlData}</p>
      <!--不出现undefind-->
      <input>
    </div>
  </body>
</html>

jade的循环
for循环

//for 循环
        - let obj = {a:"apple",b:"blue"}
        - for ( k in obj)
          //注意标签一定要和for对齐不要和 - 对齐
          p= obj[k]

each循环

//each循环
        - let arr = ["2","3","4"]
        - let objName ={"1":"test","2":"demo"}
        - each val,key in arr
          p= val+"val"
          p= key+"key"
        - each val,key in objName
          p= val+"val"
          p= val+"key"
        //嵌套循环

嵌套循环

   - let sections = [{title:'test',items:[1,2,3]},{title:'demo',items:[4,5,6]}]
        dl
            - each self in sections
                dt= self.title
                - each item,key in self.items
                   dd= item

while循环

    //while循环
        - n = 0
        ul
          - while (n<4)
                li= n++

例如：

doctype
html
    head
        meta(charset='utf-8')
        - let title = 'jade循环'
        title= title
    body
        //for 循环
        - let obj = {a:"apple",b:"blue"}
        - for ( k in obj)
          //注意标签一定要和for对齐不要和 - 对齐
          p= obj[k]
        br
        //each循环
        - let arr = ["2","3","4"]
        - let objName ={"1":"test","2":"demo"}
        - each val,key in arr
          p= val+"val"
          p= key+"key"
        - each val,key in objName
          p= val+"val"
          p= val+"key"
        //嵌套循环
        - let sections = [{title:'test',items:[1,2,3]},{title:'demo',items:[4,5,6]}]
        dl
            - each self in sections
                dt= self.title
                - each item,key in self.items
                   dd= item

解析后

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jade循环</title>
  </head>
  <body>
    <!--for 循环-->
    <!--注意标签一定要和for对齐不要和 - 对齐-->
    <p>apple</p>
    <!--注意标签一定要和for对齐不要和 - 对齐-->
    <p>blue</p><br>
    <!--each循环-->
    <p>2val</p>
    <p>0key</p>
    <p>3val</p>
    <p>1key</p>
    <p>4val</p>
    <p>2key</p>
    <p>testval</p>
    <p>testkey</p>
    <p>demoval</p>
    <p>demokey</p>
    <!--嵌套循环-->
    <dl>
      <dt>test</dt>
      <dd>1</dd>
      <dd>2</dd>
      <dd>3</dd>
      <dt>demo</dt>
      <dd>4</dd>
      <dd>5</dd>
      <dd>6</dd>
    </dl>
 <!--while循环-->
    <ul>
      <li>0</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </body>
</html>

jade的条件语句
if else 语句

 //条件语句 if/else
        - let isBoolen = true
        - let arr = ["jade","express"]
        if arr
            if arr.length >2
                p #{arr.join(",")}
            else if arr.length >1
                p= arr.join(",")
            else
                p not found
        else
            p not found

unless 语句取反

 unless !arr
        p=arr.length

正常的switch case 语句变成 case when 语句

        //switch case语句 变成 case when 语句
        - let name = 'jade'
        case name
            when 'jade'
                p hi jade
            when 'jave'
                p hi java
            when 'koa'
                p hi koa
            default
                p no

例如：

doctype
html
    head
        meta(charset='utf-8')
        - let title ='jade的条件语句'
        title= title
    body
        //条件语句 if/else
        - let isBoolen = true
        - let arr = ["jade","express"]
        if arr
            if arr.length >2
                p #{arr.join(",")}
            else if arr.length >1
                p= arr.join(",")
            else
                p not found
        else
            p not found
        //unless 取反
        unless !arr
        p=arr.length
        //switch case语句 变成 case when 语句
        - let name = 'jade'
        case name
            when 'jade'
                p hi jade
            when 'jave'
                p hi java
            when 'koa'
                p hi koa
            default
                p no

解析后：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jade的条件语句</title>
  </head>
  <body>
    <!--条件语句 if/else-->
    <p>jade,express</p>
    <!--unless 取反-->
    <p>2</p>
    <!--switch case语句 变成 case when 语句-->
    <p>hi jade</p>
  </body>
</html>

jade 重复代码块的使用mixin函数
mixin不带参数

mixin test
            p jade study
        //调用mixin函数
        +test
        +test

带参数传递

 //mixin带参数
        mixin fn(testName,arr)
            p=testName
            ul.test
                each item in arr
                    li=item
        //调用mixin函数
        +fn("jade",["one","two","tree"])

嵌套mixin函数

 //嵌套的mixin函数
        mixin group(obj)
            p=obj.name
            +fn(obj.name,obj.arr)
        +group({name:"jade",arr:[1,2,3,4]})

mixin代码块传递

//mixin代码块的传递
        mixin tblock(names)
            p= names
                if blcok
                    block
                else
                    p not found
        +tblock('jade')

mixin属性的传递

//mixin属性的传递
        mixin attr(name)
            p(class != attributes.class)= name
        +attr('attr')(class="demo")

常用 mixin属性的传递

mixin attrs(name)
            p&attributes(attributes)= name
        +attrs('jade')(class="test",id="demo")

mixin不确定参数的传递

mixin testDemo(name, ...items)
            ul(class="#{name}")
                each item in items
                 li= item
        +testDemo('jade','node','java','python')

例如：

doctype
html
    head
        meta(charset='utf-8')
        - let title = 'jade mixin 属性'
        title= title
    body
        //重复的代码块可以用mixin,mixin是一个函数可以传多个参数
        //mixin不带参数
        mixin test
            p jade study
        //调用mixin函数
        +test
        +test

        //mixin带参数
        mixin fn(testName,arr)
            p=testName
            ul.test
                each item in arr
                    li=item
        //调用mixin函数
        +fn("jade",["one","two","tree"])

        //嵌套的mixin函数
        mixin group(obj)
            p=obj.name
            +fn(obj.name,obj.arr)
        +group({name:"jade",arr:[1,2,3,4]})

        //mixin代码块的传递
        mixin tblock(names)
            p= names
                if blcok
                    block
                else
                    p not found
        +tblock('jade')

        //mixin属性的传递
        mixin attr(name)
            p(class != attributes.class)= name
        +attr('attr')(class="demo")

        //常用的传递方式
        mixin attrs(name)
            p&attributes(attributes)= name
        +attrs('jade')(class="test",id="demo")

        //mixin传递不确定参数
        mixin testDemo(name, ...items)
            ul(class="#{name}")
                each item in items
                 li= item
        +testDemo('jade','node','java','python')

解析以后：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jade mixin 属性</title>
  </head>
  <body>
    <!--重复的代码块可以用mixin,mixin是一个函数可以传多个参数-->
    <!--mixin不带参数-->
    <!--调用mixin函数-->
        <p>jade study</p>
        <p>jade study</p>
    <!--mixin带参数-->
    <!--调用mixin函数-->
        <p>jade</p>
        <ul class="test">
          <li>one</li>
          <li>two</li>
          <li>tree</li>
        </ul>
    <!--嵌套的mixin函数-->
        <p>jade</p>
            <p>jade</p>
            <ul class="test">
              <li>1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
            </ul>
    <!--mixin代码块的传递-->
        <p>jade
          <p>not found</p></p>
    <!--mixin属性的传递-->
        <p class="demo">attr</p>
    <!--常用的传递方式-->
        <p id="demo" class="test">jade</p>
    <!--mixin传递不确定参数-->
        <ul class="jade">
          <li>node</li>
          <li>java</li>
          <li>python</li>
        </ul>
  </body>
</html>

转载于:https://my.oschina.net/yongxinke/blog/1590764