Vue服务端渲染应用框架--Nuxt.js

责编:menVScode 2017-12-31 0:27 阅读(2711)

安装Nuxt.jshttps://zh.nuxtjs.org/guide/installation

vue init nuxt/starter <项目文件名>

安装依赖包:npm install 

启动项目:npm run dev,默认端口是 3000。

目录结构https://zh.nuxtjs.org/guide/directory-structure

--.nuxt           // 打包成功后生成的文件
--assets
--component
--layouts         // 布局目录,用于组织应用的布局组件:所有的page页面都传到<nuxt/>处。
--middleware
--node_modules
--pages           // 页面目录,用于组织应用的路由及视图:只要在page目录下建立的文件路劲模型,nuxt就会自动配置好路由。
--plugins         // 插件目录
--static          // 静态文件资源目录
--store           // vuex
--.editorconfig
--.eslintrc.js
--.gitignore
--nuxt.config.js  // 用于组织Nuxt.js 应用的个性化配置,以便覆盖默认配置。
--package.json
--README.md


关闭 eslint 语法检测功能:找到 nuxt.config.js 文件注释相关代码,如下:

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'nuxtssr',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** Run ESLint on save
    */
    extend (config, ctx) {
      /*if (ctx.dev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }*/
    }
  }
}

package.json 配置

设置ip和端口,默认是 http://localhost:3000

{
  "name": "nuxtssr",
  "version": "1.0.0",
  "description": "Nuxt.js project",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "nuxt", // 开发的时候,边开发边热更新,它产生的文件在publicPath里。
    "build": "nuxt build", // 发布的时候
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
  "config":{
    "nuxt":{
      "host":"192.168.8.125",
      "port":"1111"
    }
  },
  "dependencies": {
    "nuxt": "^1.0.0-rc11"
  },
  "devDependencies": {
    "babel-eslint": "^7.2.3",
    "eslint": "^4.3.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-html": "^3.1.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.1.1",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-standard": "^3.0.1"
  }
}

        打包及运行:先运行 npm run build,在运行 npm start。

nuxt.config.js 配置

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'nuxtssr111',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
      // 可以在这里定义css文件路劲,也可以单独写出来
    ]
  },
  /*
  ** 定义加载css文件
  */ 
  css:['~assets/css/normalize.css'], // 符号~:给nuxt一个索引,基于根目录
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** Run ESLint on save
    */
    vendor:['axios'],
    loaders:[
      {
        test:/\.(jpe?g|png|gif|svg)$/,
        loader:'url-loader',
        query:{
          limit:10240,
          name:'img/[name].[hash].[ext]'
        }
      },
      {
        test:/\.less$/,
        loader:'less-loader'
      }
    ],
    extend (config, ctx) {
      if (ctx.dev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

ssr路由机制

        ssr中的路由就是a链接跳转。

        未完待续。

404页面修改

        404页面文件位置:项目名字\node_modules\nuxt\lib\app\components\nuxt-error.vue,打包成功后也会在 项目文件\.nuxtssr\.nuxt\components目录下生成nuxt-error.vue。

static静态资源使用

        包括图片、js文件、css文件,但发布之后存在根目录下,比如组件要引用static目录下的图片:<img src="/111.jpg" />

assets静态资源使用

        组件要引用assets目录下的图片:<img src="~assets/img/333.jpg" />,或者css样式:background:url("~assets/img/333.jpg")

vuex在nuxt中的使用

        


标签: nuxt vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码