请选择 进入手机版 | 继续访问电脑版

使用nuxt.js构建一个vue项目【1】

[复制链接]
钟启航 发表于 2021-1-1 18:35:03 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
使用nuxt.js构建一个vue项目

Nuxt.js 十分简朴易用。一个简朴的项目只需将 nuxt 添加为依赖组件即可。
确保安装了 npx(npx 在 NPM 版本 5.2.0 默认安装了):
1.使用nuxt2.0官方脚手架,我们需要全局安装npx,输入

  1. npm i -g npx
复制代码
为了快速入门,Nuxt.js 团队创建了脚手架工具create-nuxt-app。
2.运行 create-nuxt-app

随后切换到想要创建项目标路径输入
  1. npx create-nuxt-app
复制代码
npx create-nuxt-app 项目名称
配置根本信息 : 图示
  1. create-nuxt-app v3.4.0✨  Generating Nuxt.js project in nuxtCode? Project name: adjust? Programming language: JavaScript? Package manager: Npm? UI framework: None? Nuxt.js modules: (Press  to select,  to toggle all, <i> to invert selection)? Linting tools: (Press  to select,  to toggle all, <i> to invert selection)? Testing framework: None? Rendering mode: Universal (SSR / SSG)? Deployment target: Server (Node.js hosting)? Development tools: (Press  to select,  to toggle all, <i> to invert selection)? What is your GitHub username? caolili? Version control system: Git- Installing packages with npm  
复制代码

再随后会出现一堆配置项,可以集成koa,element-ui等模块,按需选yes或no即可
1.在集成的服务器端框架之间举行选择:


  • None (Nuxt 默认服务器)
  • Express
  • Koa
  • Hapi
  • Feathers
  • Micro
  • Fastify
  • Adonis (WIP)
2.选择您喜欢的 UI 框架:


  • None (无)
  • Bootstrap
  • Vuetify
  • Bulma
  • Tailwind
  • Element UI
  • Ant Design Vue
  • Buefy iView Tachyons
3.选择您喜欢的测试框架:


  • None (随意添加一个)
  • Jest
  • AVA
4.选择你想要的 Nuxt 模式 (Universal or SPA)
5.添加 axios module 以轻松地将 HTTP 请求发送到您的应用步伐中。
6.添加 EsLint 以在生存时代码规范和错误查抄您的代码。
7.添加 Prettie 以在生存时格式化/美化您的代码。
当运行完时,它将安装所有依赖项,因此下一步是启动项目:
  1. cd  
复制代码
3.安装依赖



  • sass
  1. npm i node-sass sass-loader scss-loader --save-dev
复制代码
asyncAxios.js
  1. import cookie from "./cookie";import tool from "./tool";export default {  async get(context, url, params = {}) {    params = helper.thqs(params);    let token = cookie.get("token");    if (!process.client) {      const localCookie = cookie.getcookiesInServer(context.req);      token = tool.isEmpty(localCookie.token) ? "" : localCookie.token;    }    token = tool.isEmpty(token) ? "" : token;    const result = await context.$axios.get("http://" + url, {      params,      headers: {        Token: token,        Appid: "506320220E0FA6B9"      }    });    // eslint-disable-next-line no-console    return result.data.status === 200 && result.data.data      ? result.data.data      : false;  },  async post(context, url, params = {}) {    params = helper.thqs(params);    let token = cookie.get("token");    if (!process.client) {      const localCookie = cookie.getcookiesInServer(context.req);      token = tool.isEmpty(localCookie.token) ? "" : localCookie.token;    }    token = tool.isEmpty(token) ? "" : token;    const result = await context.$axios.post("http://" + url, {      params,      headers: {        Token: token,        Appid: "506320220E0FA6B9"      }    });    // eslint-disable-next-line no-console    console.log(result);    return result.data.status === 200 && result.data.data      ? result.data.data      : false;  }}
复制代码


  • 跨域服务署理
  1. npm i @nuxtjs/axios @nuxtjs/proxy --save-dev
复制代码
nuxt.config.js中跨域相关配置
  1. export default {  // 省略  // ...........code...............  // 省略  modules: ["@nuxtjs/axios"],  axios: {    proxy: true  },   proxy: {    "/passport": {      target: "https://code.com",      changeOrigin: true,      pathRewrite: {        "^/passport": ""      }    },    "/adjust": {      target: "http://code.com",      changeOrigin: true,      pathRewrite: {        "^/adjust": ""      }    }  }};
复制代码
4.安装第三方插件

nuxt.config.js中plugins相关配置
  1.   // 省略  // ...........code...............  // 省略  plugins: [    "@/plugins/vue-layer",     {       src:"@/plugins/vue-swiper",       ssr: false  //window is not defined    },    // ...........code...............  ],  // 省略  // ...........code...............  // 省略
复制代码

  • vue -swiper
安装
注此处有坑
1 要安装指定版本
2 配置相关 nuxt.config.js.
  1.   plugins: [{       src:"@/plugins/vue-swiper",       ssr: false  //ssr:true => window is not defined  }],
复制代码
  1. npm install swiper vue-awesome-swiper@3.1.3 --save
复制代码
vue-swiper.js
  1. import Vue from &#39;vue&#39;import VueAwesomeSwiper from &#39;vue-awesome-swiper&#39;;// 版本差别 导入样式文件有所差别 百度一下 import &#39;swiper/swiper-bundle.css&#39;;Vue.use(VueAwesomeSwiper)
复制代码
swiper 在页面中的使用
  1.                         
  2. [list]               
  3. [*] {{item.start_time}}  {{item.type}}               
  4. [*]{{item.title}}               
  5. [*]                    -10分调治                    -10分调治                    -10分调治                    -10分调治            
  6. [/list]               
  7.         
  8.         
  9.    
复制代码

  • vue-layer
  • element UI
npm

卸载已安装的插件
  1. $ npm uninstall XXXX -g
复制代码
检察已安装的插件
  1. $ npm ls
复制代码
来源:https://blog.csdn.net/weixin_44311458/article/details/111932010
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )