Vue项目改造nuxt

最新推荐文章于 2024-06-17 15:52:23 发布

九分库

最新推荐文章于 2024-06-17 15:52:23 发布

阅读量2k

点赞数 4

分类专栏：功能文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_52912134/article/details/127297871

版权

功能专栏收录该内容

48 篇文章 0 订阅

订阅专栏

# Vue项目改造nuxt

## 1.安装nuxt(如果 vue-cli 没有安装, 需先通过 npm install -g vue-cli 来安装)

```
npm install --save nuxt
```

## 2.在你想要的目录下创建nuxt项目

```
npx create-nuxt-app <项目名>
```

创建会有一些选择，可以根据自己项目需要进行选择，因为我的项目用到了elementUi,axios,eslint，所有选了这些，其他2项都默认，这样会自动安装我选好的依赖，如果没选后期自己下依赖也可以

选完后就创建好了一个nuxt项目，目录结构是这样的

├── assets // 资源文件。用于组织未编译的静态资源入LESS、SASS 或 JavaScript

│ └── logo.jpg // 默认logo图片

├── components // 组件。用于自己编写的Vue组件，比如滚动组件，日历组件，分页组件

│ └── AppLogo.vue // 默认logo组件

├── layouts // 布局。页面都需要有一个布局，默认为 default。它规定了一个页面如何布局页面。所有页面都会加载在布局页面中的 <nuxt /> 标签中。

│ └── default.vue // 默认模板页面，类似mvc中的layout

├── middleware // 中间件。存放中间件。可以在页面中调用： middleware: 'middlewareName' 。

├── pages 　 // 页面。一个 vue 文件即为一个页面。

│ └── index.vue // 默认首页面

├── plugins // 用于存放JavaScript插件的地方

│ └── element-ui.js // 上边我们安装的UI框架

├── static // 用于存放静态资源文件，比如图片，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。

├── store 　 // 用于组织应用的Vuex 状态管理。

├── .editorconfig // 开发工具格式配置

├── .eslintrc.js // ESLint的配置文件，用于检查代码格式

├── .gitignore // 配置git不上传的文件

├── nuxt.config.js // 用于组织Nuxt.js应用的个性化配置，比如网站title，已便覆盖默认配置

├── package.json // npm包管理配置文件

└── [README.md](http://readme.md/) // 说明文档

这时候可以用npm run dev 启动了，没有router文件，nuxt不需要自己配置路由文件，pages中的文件名就是你的路由，执行完npm run dev会发现目录会多一个.nuxt 文件，

这是程序启动自动生成的，里面会有一个router.js,就是自动生成的路由，目录结构是这样的

##### ![Snipaste_2022-10-13_10-22-08](C:\Users\DELL\Desktop\nuxt\Snipaste_2022-10-13_10-22-08.png)

## 3、开始改造

### 3-1 移动src

把我们原vue项目下的src,直接拷贝到现在的nuxt根目录下（src和pages一级），把根目录下的components,layouts,page,store全部删掉（为了方便区分，不删也可以），

在nuxt.config.js配置 srcDir:'src/' 重定向默认目录,这样就把以前默认根目录改成src目录，src/pages里面存放的是所有的vue文件，index.vue是默认展示页

![Snipaste_2022-10-13_10-28-42](C:\Users\DELL\Desktop\nuxt\Snipaste_2022-10-13_10-28-42.png)

把plugins放到我们src目录下（因为plugins要存放js插件），把我们src下的views改为pages

### 3-2 配置layouts

把原vue项目的app.vue中的代码拷贝放到layout/mian.vue中（布局目录 `layouts` 用于组织应用的布局组件，在页面中使用layout: 'mian'，https://www.nuxtjs.cn/guide/views#%E5%B8%83%E5%B1%80）

![Snipaste_2022-10-13_10-34-21](C:\Users\DELL\Desktop\nuxt\Snipaste_2022-10-13_10-34-21.png)

### 3-3 配置plugins

原vue项目的main.js放到plugins下，然后在nuxt.config.js中引入，这是我用到的所有的js插件，如果你还有其他引用也要放到这里引入

![img](file:///C:/Users/DELL/Desktop/nuxt/Snipaste_2022-10-13_10-40-25.png?lastModify=1665628993)

![img](file:///C:/Users/DELL/Desktop/nuxt/Snipaste_2022-10-13_10-42-10.png?lastModify=1665628993)

### 3-4 全局css

如果原项目mian.js里面有引入css文件一定要提出来，把全局引入的css都统一放到src/style目录下，然后在nuxt.config.js中引入

![Snipaste_2022-10-13_10-44-11](C:\Users\DELL\Desktop\nuxt\Snipaste_2022-10-13_10-44-11.png)

### 3-5 配置环境

配置生产模式和开发模式请求不同地址

在根目录创建env.js 内容

```
module.exports = {
SENTRY_DSN:'https://3f07a0febcf34bfebf4ad8d5c09d27ce@citec.picp.vip/9',
RELEASE_VERSION:'citec-omo-mall-pc@1.0',
SENTRY_DEV:false,
dev: {
MODE: 'development',
ENV_API: 'https://ceres.zkthink.com/api', //测试服务器地址
BASE_URL:'https://ceres.zkthink.com/api'
},
pro: {
MODE: 'production',
ENV_API: 'https://ceres.zkthink.com/api', // 正式服务器地址
BASE_URL:'https://ceres.zkthink.com/api'
}
}
```

在nuxt.config.js 中引入env.js 然后配置env

```
const env = require('./env’)
module.exports = {
env: {
BASE_URL: env[process.env.MODE].BASE_URL,
NODE_ENV: env[process.env.MODE].MODE,
SENTRY_DSN: env.SENTRY_DSN,
SENTRY_DEV: env.SENTRY_DEV,
RELEASE_VERSION:env.RELEASE_VERSION
}
}
```

这样配置完就axios请求生产和开发地址就配置好了，这个时候通过npm run dev 就可以看到你的项目了（如果你原vue 项目的路由和文件名不同名的时候就要修改一下有跳转路由的地方就可以）

### 3-6 使用svg

如果项目用引入svg文件的还需要在nuxt.config.js中配置

```
npm install nuxt-svg-sprite-loader
```

在nuxt.config.js中配置

```
modules: [
'@nuxtjs/axios',
['nuxt-svg-sprite-loader', {
symbolId: 'icon-[name]'
}],
],
```

这个时候项目便可以正常运行起来了，你会发现跟我们原来vue项目还是差不都，打包的时候并没有把动态数据静态化

这个时候就需要asyncData做服务端提前渲染（https://www.nuxtjs.cn/guide/async-data）

### 3-7 asyncData渲染组件

asyncData渲染组件（仅限于pages下的页面，components下的组件不可以用）之前异步获取数据

asyncData 方法是在组件初始化之前调用的，所以this关键字不能用，

我这里的getBanners是提前引入的接口请求，然后拿到的值通过return 返回，return返回的变量都要和页面要用的变量名（data定义过）一致，这样就可以在页面加之前把动态数据拿过来，并进行渲染了，这时候右键查看源码就可以看到动态数据了

### 3-8 components组件提前加载数据

components组件想提前加载数据可以用vueX

比如菜单这样的组件是需要提前加载数据利于网页爬虫去爬这些链接，asyncData又不能在这里用，这个时候就可以用vuex了

你的请求要写在actions 中的nuxtServerInit里，这里可以参考<https://zh.nuxtjs.org/guide/vuex-store>，写的很详细就不多阐述了

不需要安装vuex,因为nuxtjs已经提供了

```
import { getMenus } from '@/api'
export const state=()=>({
menus: []
})
export const mutations= {
setMeuns (state, value) {
state.menus = value
}
}
export const actions= {
async nuxtServerInit({ commit}, { req }) {
const getMenusres = await getMenus()
let tempMenus = [],menus = getMenusres.data.data.items;
menus.forEach(item => {
if (!item.parentid) {
tempMenus.push(item)
}
})
commit("setMeuns", tempMenus);
}
```

vue页面使用直接写在computed里即可

```
computed:{
menus(){
console.log(this.$store.state.menus)
return this.$store.state.menus
}
},
```

### 3-9 部署发布

如果是多环境打包的话要在package.json中配置一下，打包时候可以npm run build

安装cross-env

`npm install cross-env`

在需要的脚本之前加入 cross-env NODE_ENV=dev ，表示执行该脚本时，添加env[环境变量](https://so.csdn.net/so/search?q=%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F&spm=1001.2101.3001.7020)NODE_ENV（变量名），dev(值) 。

package.json的scripts修改后如下：

```
"scripts": {
"dev": "cross-env MODE=dev nuxt",
"build": "cross-env MODE=pro nuxt build",
"start": "cross-env MODE=pro nuxt start",
"generate": "cross-env MODE=pro nuxt generate"
},
```

Nuxt.js 提供了两种发布部署应用的方式：服务端渲染应用部署和静态应用部署（可以参考<https://zh.nuxtjs.org/guide/commands>）

### 3-10 配置mate标签

在nuxt.config.js中配置titile 和mate

```
head: {
title: '新零售商城',
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' }
],
link: [
{ rel: 'icon', href: '/citec.ico' }
],
script:[
{
src: 'https://citec.oicp.vip/omo/mall/pc/js/qrcode.min.js'
}
],
},
```

这样基本配置就改造完毕

## 参考链接

nuxt中文官网：https://www.nuxtjs.cn/

nuxt配置cross-env：https://blog.csdn.net/weixin_41863539/article/details/126040557

nuxt使用svg：https://blog.csdn.net/qq_41200374/article/details/124925498

nuxt使用iconfont：https://blog.csdn.net/m0_60845208/article/details/124378204

nuxt中配置sass变量的使用：https://www.jianshu.com/p/3be496308639

九分库

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue项目改造nuxt

把原vue项目的app.vue中的代码拷贝放到layout/mian.vue中（布局目录 `layouts` 用于组织应用的布局组件，在页面中使用layout: 'mian'，https://www.nuxtjs.cn/guide/views#%E5%B8%83%E5%B1%80）它规定了一个页面如何布局页面。你的请求要写在actions 中的nuxtServerInit里，这里可以参考，写的很详细就不多阐述了。
复制链接

扫一扫