zoukankan      html  css  js  c++  java
  • vuessr nuxt入门指南

    nuxt.js

    官网地址:https://zh.nuxtjs.org/guide/installation

    1.安装

    vue init nuxt-community/starter-template <project-name>
    cd <project-name>
    npm install
    
    npm run dev
    

    2.目录结构

    img

    1534311665762

    2.1 layout

    • layout/blog.vue
    <template>
        <section>
            <div>这里是博客导航</div>
            <nuxt/>
        </section>
    </template>
    
    • layout/error.vue
    <template>
      <div class="container">
        <h1 v-if="error.statusCode === 404">页面不存在</h1>
        <h1 v-else>应用发生错误异常</h1>
        <nuxt-link to="/">首 页</nuxt-link>
      </div>
    </template>
    
    <script>
    export default {
      props: ['error'],
      layout: 'blog' // 你可以为错误页面指定自定义的布局 ,这个是上一个文件
    }
    </script>
    

    1534315048663

    3.路由

    3.1 validate 方法 页面校验

    Nuxt.js 可以让你在动态路由对应的页面组件中配置一个校验方法用于校验动态路由参数的有效性。

    <script>
    export default {
      validate ({ params }) {
        // 这里校验必须为数字,parems.info info是文件名字
        return /^d+$/.test(params.info)
      }
    }
    </script>
    

    1534312258689

    3.2 路由跳转

    <nuxt-link to="/">首 页</nuxt-link>
    

    4.发送请求

    • async await
    <script>
      async asyncData({ params }) {
        var url = "http://dev.api.looklook.cn/kt_server/common/orderquery";
    
        var params_data = {
          out_trade_no: "1529386449613100027156",
          sign: "454C7C068BCEAA4ADC01F0AD4EDC5385",
          time: "1530110050760"
        };
    
        let res = await axios.post(url, params_data);
        return {
          response: res.data.data.information
        };
      }
    </script>
    
    • Promise
    asyncData({params}) {
        let that = this;
    
        var url = "http://dev.api.looklook.cn/kt_server/common/orderquery";
    
        var params_data = {
            out_trade_no: "1529386449613100027156",
            sign: "454C7C068BCEAA4ADC01F0AD4EDC5385",
            time: "1530110050760"
        };
        return axios
            .post(url, params_data)
            .then(function(response) {
            return {
            response: response.data.data.information
            }
        })
            .catch(function(error) {
            console.error(error);
        });
     }
    
    • 普通请求
    created() {
        let that = this;
    
        var url = "http://dev.api.looklook.cn/kt_server/common/orderquery";
    
        var params = {
            out_trade_no: "1529386449613100027156",
            sign: "454C7C068BCEAA4ADC01F0AD4EDC5385",
            time: "1530110050760"
        };
        axios
            .post(url, params)
            .then(function(response) {
            that.response = response.data.data.information
        })
            .catch(function(error) {
            console.error(error);
        });
    }
    

    注意:

    有一个值得注意的问题是,如果我们在另外一个页面内也引用了 axios,那么在应用打包发布的时候 axios 会被打包两次,而实际上我们只需要打包一次。这个问题可以通过在 nuxt.config.js 里面配置 build.vendor 来解决:

    module.exports = {
      build: {
        vendor: ['axios']
      }
    }
    

    5.部署

    • 服务端部署
    npm run build
    npm run start
    
    提示: 建议将 .nuxt 加入 .npmignore 和 .gitignore 文件中。
    
    • 静态资源部署
    npm run generate
    

    6. 引入element-ui

    npm i element-ui -S
    
    • 再plugins 文件夹下,添加 ElementUI.js文件,内容如下:
    import Vue from 'vue'
    import ElementUI from 'element-ui'
    Vue.use(ElementUI)
    
    • 在 nuxt.config.js中添加配置
    plugins: [{
      src: '~plugins/ElementUI',
      ssr: true,
    }],
    css: [
      'element-ui/lib/theme-chalk/index.css'
    ],
    build:{
       vendor:['element-ui']   //防止element-ui被打包多次
    }
    

    7.封装axios

    在plugins 文件夹中 添加 axios.js

    • /plugins/axios.js
    import axios from 'axios'
    //定义fetch函数,config为配置
    export function fetch(config){
       //返回promise对象
       return new Promise((resolve,reject) =>{
           //创建axios实例,把基本的配置放进去
           const instance = axios.create({
               //定义请求文件类型
               headers:{
                  'Content-Type': 'application/json',
                },
                // 请求超时  
                timeout: 3000,
                //定义请求根目录
                baseURL: 'http://dev.api.looklook.cn/kt_server/'
            });
           //请求成功后执行的函数
            instance(config).then(res =>{
                console.log(res);
                resolve(res);
            //失败后执行的函数
            }).catch(err => {
                console.log(err);
                reject(err);
            })
        });
    }
    
    // 封装调用的接口 getData
    export function getData(url,type,data) {
        //如果type为空,默认为post方法,也可以自己改成get
        if(type==='')
            type = 'post';
        return fetch({
        //这里的url为baseURL下接口地址,如baseURL为'www.baidu.com',接口地址为'www.baidu.com/api/getdata',那么url里就写'api/getdata'
            url: url,
            method: type,
            data: data,
        })
    }
    
    • page/user/user.vue
    <script>
    import User from '~/components/User.vue'
    import {getData} from '~/plugins/axios.js'
    
    export default {
      components: {
        User
      },
      async asyncData({ params, query }) {
        var params_data = {
          out_trade_no: "1529386449613100027156",
          sign: "454C7C068BCEAA4ADC01F0AD4EDC5385",
          time: "1530110050760"
        };
    
        let res = await getData('common/orderquery','POST',params_data)
        return {
          response: res.data.data.information
        };
      }
    }
    </script>
    

    更改端口号

    nuxt 默认端口号3000
    package.json 里添加如下代码

      "config": {
        "nuxt": {
          "host": "0.0.0.0",
          "port": "8080"
        }
      }
    

    项目打包上线

    1.删除node_moudles
    2.删除package-lock.json 此文件里包含校验文件
    3.npm run build
    4.npm run generate
    5.生成dist文件夹
    

    nuxt 项目部署几项注意

    1. node 版本>=8
    2. vue 和 vue-server-renderer 版本一致
    
  • 相关阅读:
    “软件工程”课程评价
    我爱淘二次冲刺阶段4
    我爱淘二次冲刺阶段3
    我爱淘二次冲刺阶段2
    MVC框架具体使用
    初次见面- MVC
    设计模式
    读大型网站技术架构后感
    以《淘宝以《淘宝网》为例,描绘质量属性的六个常见属性场景。
    以《淘宝网》为例,描绘质量属性的六个常见属性场景。
  • 原文地址:https://www.cnblogs.com/luxiaoyao/p/9787259.html
Copyright © 2011-2022 走看看