Nuxt項目搭建並使用及一些注意項

雖然也算是有vue的經驗，不過nuxt確實是第一次玩，不少東西都是摸索的，也遇到了坑，項目最後還算能跑起來，這裏寫上我從搭建到開發，及最後部署的過程吧

1. 執行命令:npx create-nuxt-app nuxttest（nuxttest是項目名，可本身命名），而後等待數據加載，而後會有一些選項，根據提示進行相應的選擇，如下爲我的選項

   Project name nuxttest
   Project description My brilliant Nuxt.js project
   Author name qiudaniu
   Choose the package manager Npm
   Choose UI framework iView
   Choose custom server framework Koa
   Choose Nuxt.js modules (Press to select, to toggle all, to invert selection)
   Choose linting tools (Press to select,to toggle all, to invert selection)
   Choose test framework Jest
   Choose rendering mode Single Page App

   全部選擇完後會進行初始化項目，初始完畢後會有一段提示，你須要怎麼執行開發環境，執行部署，執行測試，

   🎉 Successfully created project nuxttest

   To get started:

   cd nuxttest
       npm run dev

   To build & start for production:

   cd nuxttest
       npm run build
       npm run start

   To test:

   cd nuxttest
       npm run test

2. 一些介紹及教程能夠看nuxt官網 ，從初始化項目到對應的模塊使用上都有介紹，若是項目玩的還算能夠，基本上全部官網上介紹的目錄文件夾都會用上；

   其實這裏或者在第一步以前均可以執行這個命令安裝nuxt執行全局環境 npm i nuxt@2.8.1 -g，這裏我固定了版本 ；執行比較慢，耐心等待；

3. 在目錄結構中，有一個文件nuxt.config.js同vue-cli建立的vue.config.js有些功能差很少，這裏說下跨域，如下代碼能夠加入到nuxt.config.js中，若是接口前有api字段標識，其餘的本身改改，通常都會用上這個代理配置；

   axios: {
       proxy: true,
       prefix: '/api/',
       credentials: false
     },
     proxy: {
       '/api': {
         target: process.env.VUE_APP_BASE_API, // 這裏本身配置接口地址 
         changeOrigin: true
       }
     }

4. 在寫代碼的時候注意server下，服務端代碼用require和module.exports來引入和導出（若是使用了babel-cli配置下也能夠用import 和export default，不事後邊部署應該會有些問題，注意下，開發模式運行沒問題）

5. middleware這個中間件我以爲挺好玩的，在以前的項目vue-cli搭建時沒有試過，能夠進行頁面權限過濾及登陸過濾，這裏貼上我用到的過濾方式

   import storagekeys from '@/utils/configs/storagekeys';
   import Cookies from 'js-cookie';
   const notVertificationList = ['login', 'index', 'tenantmanage-channel-list'];
   const authMenuVerification = routeName => {
     window.onresize = null;
     let userInfo = localStorage.getItem(storagekeys.local.vuexStore);
     if (!userInfo) {
       return false;
     }
     userInfo = JSON.parse(userInfo);
     if (!userInfo.userinfo || !userInfo.userinfo.userInfo || !userInfo.userinfo.userInfo.menus || userInfo.userinfo.userInfo.menus.length === 0) {
       return false;
     }
     let menuList = userInfo.userinfo.userInfo.menus;
   
     let num = routeName.split('-').length;
     if (num === 1) {
       return false;
     }
     if (num === 2) {
       let menuName1 = routeName.split('-')[0];
       let menu1 = menuList.find(i => i.code === menuName1);
       if (!menu1) {
         return false;
       }
       if (!menu1.childrens || menu1.childrens.length === 0) {
         return false;
       }
       let menu2 = menu1.childrens.find(j => j.code === routeName);
       if (!menu2) {
         return false;
       }
       return true;
     }
   }
   export default function ({
     route,
     req,
     res,
     redirect
   }) {
     let usertoken = Cookies.get(storagekeys.cookies.usertoken);
     // 這裏添加權限過濾
     if (route.name === 'login' && usertoken) {
       redirect('/')
     } else if (route.name !== 'login' && !usertoken) {
       redirect('/login');
     } else if (notVertificationList.indexOf(route.name) === -1 && usertoken && !authMenuVerification(route.name)) {
       redirect('/error/404');
     }
   }

   以上代碼簡單說下，window.onresize = null;這行，我在頁面中vue生命週期下destroyed執行去除監聽失效了，也爲了方面每一個頁面調這個太麻煩了就在中間件裏邊執行了，至於後邊個人權限在localStorage中取到的的緣由，我會在後邊講一下vuex使用時遇到的問題；

   而後是頁面權限問題，這塊規則按照本身的頁面路由來判斷的，其餘的都很簡單了;

   在頁面上若是要使用這個權限，必須在頁面中加上middleware: 'userAuth'（userAuth就是上方代碼塊文件命名）

6. 個人權限在localStorage中取到的，由於在Vuex中我用到了vuex-persistedstate這個插件，使用localstorage保持vuex中的數據(若是用戶拿連接在瀏覽器另外一個窗口中打開，或者刷新了頁面，單單用vuex是不行的，記住頁面的生命週期)

   貼上store下index.js

   import Vue from 'vue';
   import Vuex from 'vuex';
   import storagekeys from '@/utils/configs/storagekeys';
   
   // 用戶登陸信息--(包括導航權限)
   import userInfo from './userinfo';
   
   // vuex存儲的key
   const vuexStoreKey = 'vuexStore';
   
   Vue.use(Vuex);
   const store = () => new Vuex.Store({
     plugins: [createPersistedState({
       key: storagekeys.local.vuexStore,
       paths: ['userinfo']
     })],
     modules: {
       userinfo: userInfo
     }
   });
   export default store

   使用vuex-persistedstate配合vuex可能會遇到另外狀況，但願你不會遇到，兩個頁面基本同時刷新獲取數據，若是有數據是放在vuex中（也就是vuex內容使用vuex-persistedstate存儲在localstorage中），那麼有可能會丟失其中一條，方法是在vuex中調用保存前先取出來全部，而後再所有保存，在這以前能夠測試下；

   paths: ['userinfo']這塊做用是userinfo這塊數據會存儲到localstorage中

7. 若是你想登陸或者調用數據進行操做，不要在本身的server中寫接口，開發模式是沒有任何問題的，可是隻要是部署，就掛了，在response中監測到的數據永遠是頁面的html代碼；固然有解決的請務必告訴我，很是感謝；

8. 調試能夠執行nuxt，注意要中止調試時必需要執行Ctrl+C，不要強制關閉，下次調試就會報一個錯，有端口號佔用，沒法啓動，執行下方命令

   先找到對應端口號程序，而後找到tcp號，關閉
   1. netstat -ano|findstr 8082
   2. taskkill /f /t /im 19644

9. 打包部署可執行nuxt build,而後複製.nuxt,static,package.json,package-lock.json,nuxt.config.js，執行npm i,最後執行nuxt start運行；使用pm2保持執行狀態須要另外配置；