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

npm run dev
问题
在启动时遇到如下问题：
找了一圈，发现搭建项目时默认的-ui版本太低，直接用npm-ui卸载当前版本，重新使用npm-ui@版本号安装即可，版本号使用2.7.2及以上均可
项目目录简介
既然是对现有Vue项目的改造，就先看一下nuxt.js各目录的功能及vue项目目录的对比吧

文章插图
nuxt.js的目录结构
├──// 资源文件。用于组织未编译的静态资源入LESS、SASS 或
│└── logo.jpg// 默认logo图片
├──// 组件。用于自己编写的Vue组件，比如滚动组件，日历组件，分页组件
│└── .vue// 默认logo组件
├──// 布局。页面都需要有一个布局，默认为。它规定了一个页面如何布局页面。所有页面都会加载在布局页面中的标签中。
│└── .vue// 默认模板页面，类似mvc中的
├──// 中间件。存放中间件。可以在页面中调用： : ''。
├── pages// 页面。一个 vue 文件即为一个页面。
│└── index.vue// 默认首页面
├──// 用于存放插件的地方
│└── -ui.js// 上边我们安装的UI框架
├──// 用于存放静态资源文件，比如图片，此类文件不会被 Nuxt.js 调用进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。
├── store// 用于组织应用的Vuex 状态管理。
├── .// 开发工具格式配置
├── ..js// 的配置文件，用于检查代码格式
├── .// 配置git不上传的文件
├── nuxt..js// 用于组织Nuxt.js应用的个性化配置，比如网站title，已便覆盖默认配置
├── .json// npm包管理配置文件
└── .md// 说明文档
nuxt.js目录与vue.js目录的对比
整体来看，目录结构没有太大的变动，区别比较大的就是文件夹，nuxt.js项目中并没有路由的配置，这个就是 nuxt 框架的独到之处，为了能实现更好的SSR渲染，它使用的是根据页面结构，自动路由，所以你的文件名，就是你的路由名称，具体规则可查看官网文档路由。
好了，nuxt项目启动了，目录结构也清楚了，接下来就是整个现有Vue项目的迁移了。
迁移项目
目录结构重组
因为之前写习惯了vue项目，并不太想改动目录结构，就简单粗暴的在nuxt目录下新建了一个src目录，将、、、、pages、以及store全部拖到了src中，src继续保持与同级，这样整个项目结构跟vue没有啥区别了。
最终的项目结构如下如：
PS：在添加了src后需要修改一下项目的启动配置，在nuxt..js中修改为'src/'
已有vue页面迁移
将vue中对应的页面放到现在的nuxt目录下对应的位置，注意一下vue文件的命名就可以
全局配置文件及第三方组件的迁移
【Vue现有项目改造为Nuxt项目】vue项目中有用到一些全局配置文件和第三方文件，这部分js的话，直接放在中，以扩展组件的形式在项目启动时，挂载到全局中
1.自定义的配置文件修改
将自定义的变量绑定到vue的原型中，Vue.use注册到vue项目中，在vue文件中可以直接用$(自定义的变量名)调用该变量，而不需要再单独去了；最后用抛出该变量，是为了在其他js中使用。
PS：只有在vue页面中使用该变量时不需要，如果要在其他的js中使用，还是需要进来的。
2.第三方组件的迁移
直接用npm 将第三方组件加载到项目中，在需要的vue界面用载入就可以，但是需要注意的一点是，第三方组件中可能用到了、等浏览器对象，而nuxt项目是需要在客户端和服务端都要进行运行的，服务端并没有等对象，在服务端运行时会报错，所以第三方组件也跟自定义组件类似的用组件的形式载入比较安全，在下单独创建一个同名的js文件，判定是客户端时再去加载该组件就行了。