<div style="background-color: #ffffff; font-family: 'Fira Code', Consolas, 'Courier New', monospace; font-size: 20px; line-height: 27px; white-space: pre;"> <div> </div> <br /> <div><span style="color: #800000; font-weight: bold;">### 创建一个项目</span></div> <br /> <div><span style="color: #800000; font-weight: bold;">#### </span><span style="color: #000080; font-weight: bold;">**使用Nuxt脚手架工具**</span></div> <br /> <div>```javascript</div> <div>$ npx create-nuxt-app <project-name></div> <div>$ cd <project-name></div> <div>$ npm install <span style="color: #008000;">// 安装依赖</span></div> <div>$ npm run dev <span style="color: #008000;">// 启动项目</span></div> <div>```</div> <br /><br /><br /> <div><span style="color: #800000; font-weight: bold;">#### </span><span style="color: #000080; font-weight: bold;">**初始化**</span></div> <br /> <div>```json</div> <div><span style="color: #008000;">// package.json</span></div> <div>{</div> <div>     <span style="color: #0451a5;">"name"</span>: <span style="color: #a31515;">"my-app"</span>,</div> <div>     <span style="color: #0451a5;">"scripts"</span>: {</div> <div>       <span style="color: #0451a5;">"dev"</span>: <span style="color: #a31515;">"nuxt"</span></div> <div>     }</div> <div>}</div> <div>```</div> <br /> <div>```javascript</div> <div><span style="color: #008000;">// 安装nuxt并保存在package.json中</span></div> <div>$ npm install --save nuxt</div> <div><span style="color: #008000;">// 运行nuxt脚本 | 启动应用</span></div> <div>$ npm run dev</div> <div>```</div> <br /><br /><br /> <div><span style="color: #800000; font-weight: bold;">### 目录结构</span></div> <br /> <div><span style="color: #0451a5;">*</span> assets - 未编译的静态资源（比如 Less / Sass）</div> <div><span style="color: #0451a5;">*</span> static - 静态文件 (比如robot.txt)</div> <div><span style="color: #0451a5;">*</span> components - 业务组件</div> <div><span style="color: #0451a5;">*</span> layouts - 应用程序布局</div> <div><span style="color: #0451a5;">*</span> middleware - 中间件</div> <div><span style="color: #0451a5;">*</span> pages - 动态路由生成器生成的应用程序视图和路由</div> <div><span style="color: #0451a5;">*</span> plugins - 在Vuejs初始化之前运行的插件</div> <div><span style="color: #0451a5;">*</span> store - Vuex的Store文件</div> <br /> <div><span style="color: #0451a5;">></span> 注意，在 nuxt 应用中，所有的目录都是在根目录下，无 router 目录，路由由 Nuxt 自动产生</div> <br /><br /><br /> <div><span style="color: #800000; font-weight: bold;">### 页面 pages</span></div> <br /> <div>Nuxt读取pages目录中的文件树，以创建应用程序的路由：</div> <br /> <div>```javascrpt</div> <div>|-pages</div> <div>|-|-index.vue // 根路径时加载</div> <div>|-|-users</div> <div>|-|-|-index.vue // /users路径时加载</div> <div>|-|-|-_id.vue    // _使用参数/users/123定义动态路由</div> <div>```</div> <br /><br /><br /> <div><span style="color: #800000; font-weight: bold;">### 页面中关键属性</span></div> <br /> <div>```javascript</div> <div><span style="color: #0000ff;">export</span> <span style="color: #0000ff;">default</span> {</div> <div>  asyncData (context) {</div> <div>    <span style="color: #0000ff;">return</span></div> <div>    axios.get(<span style="color: #a31515;">`https://my-api/posts/</span><span style="color: #0000ff;">${</span>context.params.id<span style="color: #0000ff;">}</span><span style="color: #a31515;">`</span>)</div> <div>      .then((res) <span style="color: #0000ff;">=></span> {</div> <div>      <span style="color: #0000ff;">return</span> { title: res.data.title }</div> <div>    })</div> <div>  },</div> <div>  fetch (context) {</div> <div>    <span style="color: #0000ff;">return</span> axios.get(<span style="color: #a31515;">'http://my-api/stars'</span>).then((res)<span style="color: #0000ff;">=></span> {</div> <div>      context.store.commit(<span style="color: #a31515;">'setStars'</span>, res.data)</div> <div>    })</div> <div>  },</div> <div>  head () { <span style="color: #008000;">// 使用vue-meta为当前页设置html头部标签</span></div> <div>    <span style="color: #0000ff;">return</span> {</div> <div>      title: <span style="color: #0000ff;">this</span>.title, <span style="color: #008000;">// 此处可获取组件的数据</span></div> <div>      meta: [</div> <div>        { hid: <span style="color: #a31515;">'description'</span>, name: <span style="color: #a31515;">'description'</span>,</div> <div>         content: <span style="color: #a31515;">'My custom description'</span> }</div> <div>      ]</div> <div>      layout: <span style="color: #a31515;">'my-custom-layout'</span>, <span style="color: #008000;">// 选择页面的自定义的布局</span></div> <div>      validate (context) { <span style="color: #008000;">// 如果是false，Nuxts将加载错误页面。</span></div> <div>        <span style="color: #0000ff;">return</span><span style="color: #811f3f;"> /</span><span style="color: #0000ff;">^</span><span style="color: #811f3f;">\\d</span>+<span style="color: #0000ff;">$</span><span style="color: #811f3f;">/</span>.test(context.params.id) <span style="color: #008000;">// 必须是个数字                                                                                         },                                                                                          transition: {  // 自定义当前页面的动画</span></div> <div>          name: <span style="color: #a31515;">'my-custom-transition'</span>,</div> <div>          mode: <span style="color: #a31515;">'out-in'</span></div> <div>      }</div> <div>  }</div> <br /> <div>```</div> <br /><br /><br /> <div><span style="color: #800000; font-weight: bold;">### NUXT 组件</span></div> <br /> <div>使用<span style="color: #800000;">`<nuxt-link>`</span>作为页面的导航组件。</div> <br /> <div>```html</div> <div><span style="color: #800000;"><nuxt-link</span> <span style="color: #ff0000;">v-bind:to</span>=<span style="color: #0000ff;">"'/users' + user.name"</span> <span style="color: #800000;">></span>{{ user.fullName }}'s Profile<span style="color: #800000;"></nuxt-link></span></div> <div>```</div> <br /> <div>使用<span style="color: #800000;">`<nuxt-child />`</span>在嵌套路由中显示子组件路由。</div> <br /> <div>```html</div> <div><span style="color: #800000;"><template></span></div> <div>     <span style="color: #800000;"><div></span></div> <div>       <span style="color: #800000;"><h1></span>I am the parent view<span style="color: #800000;"></h1></span></div> <div>       <span style="color: #800000;"><nuxt-child</span> <span style="color: #800000;">/></span></div> <div>     <span style="color: #800000;"></div></span></div> <div><span style="color: #800000;"></template></span></div> <div>```</div> <br /><br /><br /> <div><span style="color: #800000; font-weight: bold;">### 布局 layout</span></div> <br /> <div>在<span style="color: #800000;">`layouts`</span>目录下创建应用布局。使用<span style="color: #800000;">`<nuxt />`</span>组件展示页面主体内容。</div> <br /> <div>```html</div> <div>// layouts/my-custom-layout.vue</div> <div><span style="color: #800000;"><template></span></div> <div>     <span style="color: #800000;"><div</span> <span style="color: #ff0000;">class</span>=<span style="color: #0000ff;">"container"</span><span style="color: #800000;">></span></div> <div>       <span style="color: #800000;"><</span><span style="color: #cd3131;">nuxt</span><span style="color: #800000;"> /></span></div> <div>     <span style="color: #800000;"></div></span></div> <div><span style="color: #800000;"></template></span></div> <div>```</div> <br /><br /><br /> <div><span style="color: #800000; font-weight: bold;">### 错误页面</span></div> <br /> <div>通过编辑<span style="color: #800000;">`layouts/error.vue`</span>来定制化错误页面。请勿在页面模板中包含<span style="color: #800000;">`<nuxt />`</span>标签。</div> <br /> <div>```html</div> <div> <span style="color: #800000;"><template></span></div> <div>   <span style="color: #800000;"><h1</span> <span style="color: #ff0000;">v-if</span>=<span style="color: #0000ff;">"error.statusCode === 404"</span><span style="color: #800000;">></span></div> <div>     Page not found</div> <div>   <span style="color: #800000;"></h1></span></div> <div>   <span style="color: #800000;"><h1</span> <span style="color: #ff0000;">v-else</span><span style="color: #800000;">></span>An error occurred<span style="color: #800000;"></h1></span></div> <div>   <span style="color: #800000;"><nuxt-link</span> <span style="color: #ff0000;">to</span>=<span style="color: #0000ff;">"/"</span><span style="color: #800000;">></span>Home page<span style="color: #800000;"></nuxt-link></span></div> <div><span style="color: #800000;"></template></span></div> <div><span style="color: #800000;"><script></span></div> <div>  <span style="color: #0000ff;">export</span> <span style="color: #0000ff;">default</span> {</div> <div>    props: [<span style="color: #a31515;">'error'</span>],</div> <div>    layout: <span style="color: #a31515;">'my-error-layout'</span></div> <div>  } <span style="color: #008000;">// 你可以为错误页面指定自定义的布局</span></div> <div><span style="color: #800000;"></script></span></div> <div>```</div> <br /><br /><br /> <div><span style="color: #800000; font-weight: bold;">### 引用文件的别名</span></div> <br /> <div>通过<span style="color: #800000;">`〜`</span>引用资源目录</div> <br /> <div>```html</div> <div><span style="color: #800000;"><template></span></div> <div>  <span style="color: #800000;"><img</span> <span style="color: #ff0000;">src</span>=<span style="color: #0000ff;">"~/assets/your_image.png"</span><span style="color: #800000;">/></span></div> <div><span style="color: #800000;"></template></span></div> <div><span style="color: #800000;"><script></span></div> <div><span style="color: #0000ff;">import</span> Visits <span style="color: #0000ff;">from</span> <span style="color: #a31515;">'~/components/Visits'</span></div> <div><span style="color: #0000ff;">export</span> <span style="color: #0000ff;">default</span> {</div> <div>  components: { Visits }</div> <div>}</div> <div><span style="color: #800000;"></script></span></div> <div> </div> <div>```</div> <br /><br /><br /> <div><span style="color: #800000; font-weight: bold;">### 状态管理 vuex</span></div> <br /> <div>如果<span style="color: #800000;">`store`</span>文件夹中有index.js文件，说明Nuxt已经自动将Vuex添加到您的项目中。该文件必须export一个返回Vuex实例的方法。</div> <br /> <div>现在你可以在组件内部使用<span style="color: #800000;">`this.$store`</span>。</div> <br /> <div>```html</div> <div><span style="color: #800000;"><template></span></div> <div>  <span style="color: #800000;"><button</span> <span style="color: #ff0000;">@click</span>=<span style="color: #0000ff;">"$store.commit('increment')"</span><span style="color: #800000;">></span></div> <div>  {{ $store.state.counter }}</div> <div>  <span style="color: #800000;"></button></span></div> <div><span style="color: #800000;"></template></span></div> <div>```</div> <br /><br /><br /> <div><span style="color: #800000; font-weight: bold;">### 公共配置 nuxt.config.js</span></div> <br /> <div>用于配置您的应用</div> <br /> <div>```javascript</div> <div><span style="color: #0000ff;">export</span> <span style="color: #0000ff;">default</span> {</div> <div>  css: [</div> <div>    <span style="color: #008000;">// 添加全局的css文件</span></div> <div>    <span style="color: #a31515;">'bulma/css/bulma.css'</span>,</div> <div>    <span style="color: #a31515;">'~/css/main.css'</span></div> <div>  ],</div> <div>  <span style="color: #008000;">// 在这里指定要从动态路由生成静态页面</span></div> <div>  generate: {</div> <div>    routes: <span style="color: #0000ff;">function</span> () {</div> <div>      <span style="color: #0000ff;">return</span> [</div> <div>        <span style="color: #a31515;">'/users/1'</span>,</div> <div>        <span style="color: #a31515;">'/users/2'</span>,</div> <div>        <span style="color: #a31515;">'/users/3'</span></div> <div>      ];</div> <div>    }</div> <div>  },</div> <div>  <span style="color: #008000;">// 自定义loading组件</span></div> <div>  loading: <span style="color: #a31515;">'~/components/loading.vue'</span>,</div> <div>  <span style="color: #008000;">// 设置每个页面的html头部标签</span></div> <div>  head: {</div> <div>    meta: [</div> <div>      { charset: <span style="color: #a31515;">'utf-8'</span> },</div> <div>      { name: <span style="color: #a31515;">'viewport'</span>, content:</div> <div>       <span style="color: #a31515;">'width=device-width, initial-scale=1'</span> }</div> <div>    ],</div> <div>    link: [{</div> <div>      rel: <span style="color: #a31515;">'stylesheet'</span>,</div> <div>      href: <span style="color: #a31515;">'https://font.com'</span>,</div> <div>    }]</div> <div>  },</div> <div>  <span style="color: #008000;">// 设置每个页面的默认动画</span></div> <div>  transition: {</div> <div>    name: <span style="color: #a31515;">'page’</span><span style="color: #cd3131;">,</span></div> <div>    mode: <span style="color: #a31515;">'out-in'</span></div> <div>  },</div> <div>  plugins: [<span style="color: #a31515;">'~/plugins/vue-notifications'</span>]</div> <div>}</div> <br /> <div>```</div> <br /><br /><br /> <div><span style="color: #800000; font-weight: bold;">### 部署</span></div> <br /> <div><span style="color: #800000; font-weight: bold;">#### 1.单页面应用程序部署(SPA)</span></div> <br /> <div><span style="color: #000080; font-weight: bold;">**优势**</span>: 使用默认的目录结构和配置文件来配置你的项目.简化服务开发.</div> <br /> <div><span style="color: #0451a5;">*</span> 将<span style="color: #800000;">`nuxt.config.js`</span>中的<span style="color: #800000;">`mode`</span>更改为 <span style="color: #800000;">`spa`</span>.</div> <div><span style="color: #0451a5;">*</span> 运行<span style="color: #800000;">`npm run build`</span>.</div> <div><span style="color: #0451a5;">*</span> 将创建的 <span style="color: #800000;">`dist/`</span> 目录部署到你的静态站点主机上,例如GitHub Pages.</div> <br /> <div><span style="color: #800000; font-weight: bold;">#### 2.静态应用部署(STATIC)</span></div> <br /> <div><span style="color: #000080; font-weight: bold;">**优势**</span>: 所有的页面都会预渲染为HTML,并具有较高的SEO优化和页面加载能力.内容在构建时生成.  </div> <br /> <div><span style="color: #0451a5;">*</span> 运行<span style="color: #800000;">`npm run generate`</span></div> <div><span style="color: #0451a5;">*</span> 将创建的包含所有生成的HTML文件和静态资源的<span style="color: #800000;">`dist/`</span>文件夹部署到你的静态站点主机上.</div> <br /> <div><span style="color: #800000; font-weight: bold;">#### 3.常规的服务端渲染应用部署(UNIVERSAL)</span></div> <br /> <div><span style="color: #000080; font-weight: bold;">**优势**</span>: 你可以同时在服务端和客户端执行你的JavaScript文件.所有的路由都具有较高的SEO优化和页面加载能力.</div> <div>动态获取发送到客户端之前在服务器上呈现的路由.</div> <br /> <div><span style="color: #0451a5;">*</span> 将应用程序的内容上载到你选择的服务器上.</div> <div><span style="color: #0451a5;">*</span> 运行<span style="color: #800000;">`nuxt build`</span> 来构建你的应用.</div> <div><span style="color: #0451a5;">*</span> 运行<span style="color: #800000;">`nuxt start`</span> 来启动你的应用并开始接收请求.</div> <br /><br /><br /> <div><span style="color: #800000; font-weight: bold;">### 运行和构建</span></div> <br /> <div>```shell</div> <div>$ nuxt <span style="color: #008000;"># 启动一个热加载的Web服务器（开发模式） localhost:3000</span></div> <div>$ nuxt generate <span style="color: #008000;"># 编译应用，并依据路由配置生成对应的HTML文件</span></div> <div>$ nuxt build <span style="color: #008000;"># 利用webpack编译应用，压缩assets下的资源</span></div> <div>$ nuxt start <span style="color: #008000;"># 以生产模式启动一个Web服务器</span></div> <div>```</div> </div>