Nuxtjs初始

 今天去看vue的官網,才看了他的升級版-->Nuxtjs,https://nuxtjs.org/guide/installation可以點擊鏈接進入他的官網查看文檔

第一步,搭建項目之前的准備工作,需要升級自己的npm的version至少在5.2以上,因為需要用到npx這個命令,如果已經是這個版本以上的就不用更新自己的npm了,如何更新npm自行百度

npx create-nuxt-app 項目名稱

第二步,他會提示讓你選擇或填寫,你的項目名稱,描述,服務端框架和ui框架等等,如下圖

選擇完之后就開始構建初始化的項目了,構建成功之后執行下面命令,啟動項目

cd 項目名
npm run dev

看到如下界面就表示你已經啟動成功了

就此,初始nuxtjs的第一步就這么開始了

|-- .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的統一性設置的，yarn也有相同的操作
|-- package-lock.json                // npm自動生成，用於幫助package的統一性設置的，yarn也有相同的操作
|-- package.json                     // npm包管理配置文件

你可以修改ip和端口號

重啟后直接訪問localhost:8888就好了

也可以直接引入css

因為vue是單頁面的,所以不利於seo的優化,所以就出來了nuxtjs,把頁面的head都提出來管理了

nuxtjs還有一個很方便的地方就是路由router自動生成

例如你在pages下簡歷如下頁面

然后你點擊.nuxt查看下面的router.js

還是有點方便的