nuxt.js

安装依赖：

vue-cli

新建文件夹目录

vs'code中打开文件夹

打开终端

命令：vue init nuxt/starter

Npm installa安装包

Npm run dev

配置域名端口

Package.json

 新增config:{
    “nuxt”:{
        “host”:”127.9.0.09”,
        “port”:”1989”
    }
}

全局配置：

Nuxt.config.js

新增配置项：

css:[‘ ~assets/css/common.css‘, ]

注意：无需添加路由，nuxt提供好了路由

webpack特殊的配置

nuxt.config.js

build:{
    loader:[
        {
        test:/\.(png|jpe?g|gif|svg)$/,
        loader:”url-loader”,
        query:{
            limit:10000,
            name:’img/[name’.[hash].[ext]
         }
        }
     ]
}

index.vue

路由跳转： nuxt-link :to=”{name:’index’,pramas:{newsId:3306}’}”

动态路由：文件目录下建 _id.vue(路由文件模板)---类似详情页面

传参：nuxt-link :to=”{name:”news-id”,pramas:{id:123}}”

路由切换的动画效果

全局加

assets/common.css
    .page-enter-active,.page-leave-active{
    transition:opacity 2s;
}
.page-enter,.page-leave-active{
    opacity:0;
}

路由特有：

assets/common.css

.test-enter-active,.test-leave-active{
    transition:all 2s;
    font-size:12px
}
.test-enter,.test-leave-active{
    font-size:40px
}

页面中：

script

export default{
  transition:’test’ 
}

根目录下新建html文件自动生成app.html

app.html (默认模板)----修改必须重启-----工作中使用较少

head

body

layout是默认布局-------不用重启页面

default.vue 中增加标签

error.vue-------错误文件配置

根据状态码配置：

v-if=”error.statuCode===404”

export default { props:[‘error’] }

动态路由文件 _id.vue

data(){
    return {
        title:this.$route.pramas.title
     }
 },
head(){ //data同级
    return{
        title:this.title,
        meta:[
        {hid:’description’,name:”news1”,content:”this is a news page”}
        ]
      }
},

异步请求数据：

安装axios(npm)

asyncData.vue

import axios form ‘axio’s;
export default{

    data(){
        return {
            tilte:’Hello World’
        }
    },
    async asyncData(){
        let {data} =await  axios.get(url).then(res=>{
        return {info:data}
    })
}

项目中使用图片

static下放图片

项目中 img src=”~static/img.logo”

nuxt.js（未完成）