vue项目进行nuxt改造

背景

原项目是使用vue-cli创建的vue项目。尝试引入ssr。直接上nuxt框架进行改造,本文做了一些改造记录

记录

1、vue-amap插件,直接在页面组件里 use的,未通过 plugins 配置,可行

2、mint-ui插件,需要 配置。

//plugins/mint-ui.js文件

//nuxt.config.js

module.exports = { plugins: [‘~plugins/mint-ui.js‘] }

plugins 属性配置

类型: Array
数组元素类型: String 或 Object
如果数组元素类型是 Object, 其具有以下属性:

src: String (文件的路径)
ssr: Boolean (默认为 true) 如果值为 false,该文件只会在客户端被打包引入。    如果设置为false,则加载不到该插件的样式,即 服务端需要加载 存在。
plugins 属性 的配置项,会在应用初始化之前加载导入    可以建一个common.js 导入 已有main.js 的初始内容

3、引入 lib-flexible:使用plugins配置的套路,导入它。并进行build配置,

4、多页应用转换及默认页:

目录结构如下:

访问:/home 能访问到index;/home/swiper能访问到 swiper

5、使用less

npm i less less-loader -D 即可

6、全局样式文件

//nuxt.config.js

css:[
‘@/assets/css/common.less‘
],

7、引入依赖收集插件:webpack-bundle-analyzer

//nuxt.config.js文件

const BundleAnalyzerPlugin=require(‘webpack-bundle-analyzer‘).BundleAnalyzerPlugin;
module.exports={
    build:{
        plugins:[
            new BundleAnalyzerPlugin()
        ]
    }
}

npm run build --report

8、vue-html5-editor 插件引入:失败, 待解决

记录:
nuxt使用的vue核心包 是运行时版本。vue-html5-editor 没有ssr 版本的js文件。它在挂载时就用到了客户端的东西 如 innerHTML;因此不可以在 服务端 加载,只能在客户端进行。但是客户端 它用的是 模板渲染,而不是 运行时渲染。因此各种报错。

建议使用:vue-quill-editor
参考链接:https://blog.csdn.net/weixin_36185028/article/details/82946453

9、axios数据请求:

nuxt本身集成了axios,因此可以使用集成,也可以单独引入。

A、集成的方式:

A1、首先需要在配置文件nuxt.config.js中配置axios项

modules: [
    ‘@nuxtjs/axios‘,
    ‘@nuxtjs/bulma‘
],
  /* 需要使用 aixos必须配置以下两项axios和proxy*/
  axios: {
    prefix: ‘/api/‘,
    proxy: true
},

proxy: {
    ‘/api/‘: {
      target: ‘https://maoyan.com/‘,
      pathRewrite: {
        ‘^/api/‘: ‘‘
      }
    }
 },

A2、在组件中使用axios, 无需在import引入, 直接使用this.$axios即可

// 这里引入context是上下文参数,代替了this,
// 因为在asyncData方法是在组件初始化时调用,所以没法通过this来引用组件实例对象。
asyncData(context) {
    return context.$axios.get(‘ajax/cities‘)
      .then(res => {
        console.log(res)
      })
  }

B、单独引入(即 本例改造的场景)

npm install axios --save
异步数据在 asyncData 方法里写(限于页面组件),每次加载之前都会调用。这里无法调用this示例。nuxt是通过 方法返回的对象与 vue data实例 匹配渲染的。

B1、跨域解决:
npm i @gauseen/nuxt-proxy -D

// nuxt.config.js

modules: [
    // 请求代理配置,解决跨域
    ‘@gauseen/nuxt-proxy‘,
],
proxyTable:{
    ‘/api‘:{
        target:‘http://bayin666.mycwgs.com‘,//设置你调用的接口域名和端口号别忘了加http
        changeOrigin:true,
        pathRewrite:{
            ‘^/api‘:‘‘
        }
    }
}

原文地址:https://www.cnblogs.com/fan-zha/p/11076260.html

时间: 2024-11-04 20:15:12

vue项目进行nuxt改造的相关文章

将一个js项目改造成vue项目

本地环境:node版本:8.11.4 vue版本:3.4.1; 开发工具vscode 1.创建一个空的vue项目(vue create bigdata_reprot_web) 2.找到项目的空白页,改造该页面 改造思路:先把依赖的css,和js一个个的引入到 vue项目中,每引入一个,看看是否生效了 顺序: jquery(虽然vue不建议使用jquery) bootstrap.min.js jquery.slimscroll.min.js beyond.js(这个是该项目的主要js) 引入bey

vue入门003~vue项目引入element并创建一个登录页面

上一节已经教大家如何创建一个vue项目,这一节,我们就温故下vue项目的创建,顺便引入element,实现一个简答的登陆页面. 老规矩,先看效果图 一,快速创建vue项目 二,引入element类库 首先我们进入element官网:https://element.eleme.cn/#/zh-CN/component/installation简单熟悉下element.然后如下图所示引入element类库.做完上面的操作后,不要忘记安装依赖. 三,在main.js里引入使用 如下图红色框里所示 四,

vue项目搭建

VUE项目搭建 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm install $ npm run dev

vue-cli+webpack搭建简单的vue项目框架

0.先去官网下载安装nodeJS 1.在cmd中输入命令 node -version    若出现node版本号 则安装成功 2.通过命令:cd 文件夹名     进入某具体文件夹后进行如下命令操作: 3.npm install -g vue-cli         全局下安装vue-cli脚手架 4.vue init webpack project    初始化项目 此处会出现一些选项,进行图片上的操作即可 5.cd  project        进入所需project项目文件夹 5.npm

通过cordova将vue项目打包为app

准备工作:需要之前配置好vue-cli脚架构,安装好cordova环境.下面开始对vue.js项目进行打包,打包环境为Android. 1.添加cordova项目 $  cordova create myApp1 org.apache.cordova.myApp myApp2 其中: myApp1:cordova目录名 org.apache.cordova.myApp: 包名 myApp2: 项目名(在config.xml的<name>中查看) 2.在vue中添加cordova的配置 myAp

Vue项目初始化

1. 生成项目模板 vue init <模板名> 本地文件夹名称2. 进入到生成目录里面 cd xxx npm install3. npm run dev vue项目模板介绍: simple 个人觉得一点用都没有 webpack 可以使用(大型项目) Eslint 检查代码规范, 单元测试 webpack-simple 个人推荐使用, 没有代码检查 √

vue-cli快速构建Vue项目

vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. vue-cli怎么使用? 安装vue-cli之前,需要先装好vue 和 webpack npm install -g vue //全局安装vue npm install -g webpack //全局安装webpack npm install -g vue-cli //全局安装vue-cli 注意:上面这些装过一次之后都不需要再安装了比如说我的项目要生成在D:/project下面那么先进到目录里

为 Vue 项目写单元测试方法详解

本文和大家分享的主要是为 Vue 项目写单元测试相关内容,一起来看看吧,希望对大家学习Vue.js 有所帮助. 众所周知,Vue.js 是一个非常牛逼的 JavaScript 框架,对于创建复杂功能的前端项目是非常有用的.不管是什么项目,检查应用是否正常工作,运行是否为预期,是尤为重要的.然而,为了保证业务正常运行,我们的项目,每做一次更新,都要对所有功能做一次回归测试,随着项目的增大,重复的测试工作越来越多,越来越乏味,手工测试将变成一个恶心的事情.正因如此,自动化测试诞生了,它可以随时监测我

vue项目总结,所用到的技术点

1.用到的技术点 vue 是一个渐进式JavaScript框架 npm install vue vue-route 是一个路由匹配功能 npm install vue-router vue-resource 发送ajax请求的 npm install vue-resource vue-preview 图片预览插件 npm i vue-preview -S vuex 组件传值 npm install vuex --save mint-ui 基于vue的移动端组件 npm i mint-ui -S