Vue现有项目改造为Nuxt项目( 三 ) _vue

文章插图
中扩展组件的相关配置
在中创建的js需要再项目启动时注册到项目中，也就是在nuxt..js中的中进行配置
plugins: [{ src: '@/plugins/config.js', ssr: true },{ src: '@/plugins/d3.js', ssr: true }]
全局样式文件迁移
全局样式文件css，在nuxt..js配置文件中的css中引入
css: ['@/assets/index.css']
用户登录状态store的迁移
项目比较着急，实在懒得用nuxt提供的方式再去改造这部分代码，直接沿用了vue中和方式，暂时项目并没有出现问题（后期如果有问题再做修改）
PS：如果该js中用到了等浏览器的对象，加个.去判断就行，其余的可以不用修改
-ui的迁移
跟vue一样先npm-ui --save，之后再下新建一个-ui.js文件,内容如下：

import Vue from 'vue'import Element from 'element-ui'import locale from 'element-ui/lib/locale/lang/en'Vue.use(Element, { locale })

然后再nuxt..js中进行配置：
plugins: [{ src: '@/plugins/element-ui', ssr: true }],css: ['element-ui/lib/theme-chalk/index.css']
防止-ui多次被打包，在nuxt..js下的build中进行配置
build: {vendor: ['element-ui']}
的使用
npm--save
然后再nuxt..js下的build中配置
build: {plugins: [new webpack.ProvidePlugin({'$': 'jquery','jQuery': 'jquery','window.jQuery': 'jquery'})]}
axios和$axios的使用
因为vue中用了axios，后期也没有修改原来的api请求，所以就继续使用了axios，直接npmaxios --save安装，在需要使用的地方即可。
如果在vue项目中已经封装了axios，直接可以把vue中写的关于api的js都挪到下，把axios抛出，再在nuxt..js下按照扩展的配置在中添加就可以正常使用了。
plugins: [{ src: '@/plugins/api/index.js', ssr: true }],
正常客户端的请求使用axios并没有什么问题，而在预加载服务端请求时就比较麻烦了，在请求中使用了nuxt默认集成的$axios，这个需要再nuxt..js下的中配置
modules: ['@nuxtjs/axios','@gauseen/nuxt-proxy'],
跨域代理配置：
proxyTable: {'/api/': {target: '数据请求的ip地址',ws: false,pathRewrite: {'^/api': '/'}}},
下数据请求
单个请求：
async asyncData ({ app, params }) {let { data } = await app.$axios.get(url).then(res => {...})}
多个请求：

async asyncData ({ app, query }) {// 请求带参数时的写法，query指的是当前访问的url中携带的参数let searchQuery = {type: query.searchTag,q: query.searchKeys,page: 1}const [nounList, resultList] = await Promise.all([app.$axios.get('请求的api地址', { params: { q: query.searchKeys }}),app.$axios.get(`/api/search/${searchQuery.type}`, { params: searchQuery })])return {nounList: nounList.data,resultList: resultList.data}}

一般情况下数据请求
this.$axios.get(url).then(res =>{...})
PS：整个项目中可以同时使用axios和nuxt默认集成的$axios，可以根据自己的需求合理使用