Nuxt学习笔记

nuxt.js

• Install

vue init nuxt/starter [Project Name]
cd [Project Name]
npm install 
npm run dev

• Project directory

|-- .nuxt                            // Nuxt自动生成，临时的用于编辑的文件，build
|-- assets                           // 用于组织未编译的静态资源入LESS、SASS 或 JavaScript
|-- components                       // 用于自己编写的Vue组件，比如滚动组件，日历组件，分页组件
|-- layouts                          // 布局目录，用于组织应用的布局组件，不可更改。
|-- middleware                       // 用于存放中间件
|-- pages                            // 用于存放写的页面，我们主要的工作区域
|-- plugins                          // 用于存放JavaScript插件的地方
|-- static                           // 用于存放静态资源文件，比如图片
|-- store                            // 用于组织应用的Vuex 状态管理。
|-- .editorconfig                    // 开发工具格式配置
|-- .eslintrc.js                     // ESLint的配置文件，用于检查代码格式
|-- .gitignore                       // 配置git不上传的文件
|-- nuxt.config.json                 // 用于组织Nuxt.js应用的个性化配置，已覆盖默认配置
|-- package-lock.json                // npm自动生成，用于帮助package的统一性设置的
|-- package-lock.json                // npm自动生成，用于帮助package的统一性设置的
|-- package.json                     // npm包管理配置文件

• Head title/meta/link setting

|-- nuxt.config.json
module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: '[Title]',
    meta: [
      { charset: 'utf-8' },
      //Dual Core browser
      { name:'renderer',content:'webkit|ie-comp|ie-stand'},
      //Mobile View
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name:'keywords',content:'[Keywords]'},
      { name:'description',content:'[description]'}
    ],
    link: [
      // Icons
      { rel: 'shortcut icon', href:'/ico/favicon.png',type:'image/x-icon'},
      { rel:'apple-touch-icon-precomposed',size:'57x57', href:'/ico/apple-touch-icon-57-precomposed.png'},
      { rel:'apple-touch-icon-precomposed',size:'72x72', href:'/ico/apple-touch-icon-72-precomposed.png'},
      { rel:'apple-touch-icon-precomposed',size:'114x114', href:'/ico/apple-touch-icon-72-precomposed.png'},
      { rel:'apple-touch-icon-precomposed',size:'144x144', href:'/ico/apple-touch-icon-72-precomposed.png'}
    ]
  }

• Global CSS import

|-- nuxt.config.json
head:{
	title,
	meta:[],
	link:[],
},
//import gloabl CSS
css:['~assets/css/style.css']
   // *"~"：root dir

• nuxt可以自动路由

|-- pages
	|--[PageName].vue
	↓↓↓
// 可直接访问 https://Domain/PageName