1. 首页
  2. IT资讯

Nuxt.js实战

项目安装
image.png

1,项目名称
2,项目描述
3,服务器框架用那个
4,用什么ui框架
5,用什么模式,是spa 还是ssr
6,用不用axios
7,用不用eslint
8,作者
9,是选择用npm 还是 yarn安装

修改配置

Nuxt 开发 – 项目初始化

Nuxt是基于Vue的一个应用框架,采用服务端渲染(SSR),可以让用户的Vue单页面应用(SPA)也可以有利于SEO。

项目初始化

$ npm install -g npx
$ npx create-nuxt-app <项目名>

安装过程中的配置选项:

  • ? Project name meituan-app
  • ? Project description My neat Nuxt.js project
  • ? Use a custom server framework koa
  • ? Use a custom UI framework element-ui
  • ? Choose rendering mode Universal
  • ? Use axios module yes
  • ? Use eslint yes
  • ? Use prettier no
  • ? Author name cedric
  • ? Choose a package manager npm
$ npm install --update-binary 

项目初始化后的配置

1. 使用ES6的 import/export

node本身不支持import export 指令,项目想要使用import 需要在项目中引入babel 进行处理,所以在package.json中做如下修改

就在dev和start 后面加上–exec babel-node

"scripts": {     "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node",     "build": "nuxt build",     "start": "cross-env NODE_ENV=production node server/index.js --exec babel-node",     "generate": "nuxt generate",     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",     "precommit": "npm run lint"   }, 

如果报错:[nodemon] failed to start process, "babel-node" exec not found

需要在根目录新建 .babelrc文件
里面写入:

{     "presets": ["es2015"] } 

然后安装:

$ npm install babel-preset-es2015  $ npm install babel-cli -S   

2. 安装 sass

$  npm install sass-loader node-sass 

安装后可以会有提示:
npm WARN acorn-jsx@5.0.0 requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-vue@4.7.1 requires a peer of eslint@^3.18.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.

此时,需要安装:

$ npm i eslint@^3.18.0 $ npm i acorn@^6.0.0  提供全局 scss 变量 npm i -S @nuxtjs/style-resources npm i -D sass-loader node-sass //上面已经安装了就不需要了

修改 nuxt.config.js

export default {    modules: [     // Doc: https://axios.nuxtjs.org/usage     '@nuxtjs/axios',     '@nuxtjs/style-resources'   ],   styleResources: {     scss: '@/assets/css/global.scss'

3. 修改 nuxt.config.js

改了meta:[{name:内容}]

import pkg from './package'  export default {   mode: 'universal',    /*   ** Headers of the page   */   head: {     title: pkg.name,     meta: [       { charset: 'utf-8' },       { name: 'viewport', content: 'width=device-width, initial-scale=1, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' },       { hid: 'description', name: 'description', content: pkg.description }     ],     link: [       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }     ]   },    /*   ** Customize the progress-bar color   */   loading: { color: '#fff' },    /*   ** Global CSS   */   css: [   ],    /*   ** Plugins to load before mounting the App   */   plugins: [     '@/assets/js/global.js'   ],    /*   ** Nuxt.js modules   */   modules: [     // Doc: https://axios.nuxtjs.org/usage     '@nuxtjs/axios',     '@nuxtjs/style-resources'   ],   styleResources: {     scss: '@/assets/css/global.scss'   },   /*   ** Axios module configuration   */   axios: {     // See https://github.com/nuxt-community/axios-module#options   },    /*   ** Build configuration   */   build: {     /*     ** You can extend webpack config here     */     extend(config, ctx) 

原文始发于:Nuxt.js实战

主题测试文章,只做测试使用。发布者:玩家L-,转转请注明出处:http://www.cxybcw.com/21526.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code