基于 Nuxt.js 开发企业网站

2,867 阅读1分钟
原文链接: github.com

使用

线上示例

www.liruan.cn

命令

# 开发调试
$ npm run dev

# 服务端渲染应用部署

# 构建
$ npm run build

# 启动
$ npm start

# 停止
$ npm stop

应用配置

修改 package.json,将 {app-name} 改成自己的:

"scripts": {
  "stop": "pm2 stop {app-name}"
}

修改 processes.json,将 {app-name} 改成自己的:

"apps": [
  {
    "name": "{app-name}"
  }
]

修改 nuxt.config.js

添加全局 CSS:

css: [
  '~/assets/styles/global/index.scss'
]

参考:zh.nuxtjs.org/guide/confi…

CSS 提取到一个单独的 CSS 文件中:

build: {
  extractCSS: true
}

参考:zh.nuxtjs.org/api/configu…

配置 PostCSS autoprefixer:

build: {
  postcss: {
    preset: {
      autoprefixer: {
        browsers: ['last 2 versions', '> 5%']
      }
    }
  }
}

配置 CDN:

build: {
  publicPath: 'https://my-app.lrcdn.cn'
}

默认首页改为 pages/index/index.vue:

router: {
  extendRoutes (routes, resolve) {
    routes.splice(routes.findIndex(item => item.name === 'index'), 1, {
      name: 'index',
      path: '/',
      component: resolve(__dirname, 'pages/index/index.vue')
    })

    routes.splice(routes.findIndex(item => item.name === '404'), 1, {
      name: '404',
      path: '*',
      component: resolve(__dirname, 'pages/404/index.vue')
    })
  }
}

参考:zh.nuxtjs.org/api/configu…

修改 layouts/default.vue

去掉 <style>。

页面目录规范

|-- page                      // 页面
|   |-- index.vue             // 页面入口
|   |-- styles                // 样式
|       |-- index.scss        // 样式入口
|       |-- images            // 样式引用图片
|   |-- images                // 页面引用图片

组件目录规范

与页面目录规范一致。

参考

文档

文章

视频