vue的nuxt與electron學習筆記

該文章純屬筆記,寫的非常凌亂,請諒解

Nuxt.js是vue項目中一個能夠搜索引擎優化的框架,原來的vue項目的前後端分離,均是通過發送ajax請求然後獲取json異步方式。這種方式不利於搜索引擎優化,因爲搜索引擎爬蟲爬到後是空殼子。nuxt.js解決這一難點。

安裝vue

在windows環境中安裝nodejs,再安裝npm。基本環境安裝完成後,設置vue鏡像地址,國外鏡像很慢。

設置淘寶鏡像地址
npm config set registry https://registry.npm.taobao.org
驗證是否可行
npm config get registry

安裝vue
npm install vue -g
npm install -g vue-cli

新建一個vue項目

不建議重頭開始,直接使用 vue init webpack 項目名
vue init webpack hello
出現如下填寫的信息,依次填寫,很簡單很方便就完事了。
在這裏插入圖片描述
進入到創建項目的目錄hello中,依次成功執行
npm install
npm run dev
啓動完成,後面的開發可以一葫蘆畫瓢了。可能有一些權限,可以設置路由攔截器。請求的攔截器,都可以設置,可以參考一些簡單的框架代碼,比如:https://gitee.com/nmgwap/vueproject,他們是如何做的。

使用Nuxt.js
安裝Nuxt.js

執行命令,該命令跟vue項目創建一下,根據信息依次填寫
npx create-nuxt-app <項目名>

啓動項目,依次啓動npm installnpm run dev 這樣就啓動起來了
在這裏插入圖片描述
設置項目的端口,ip我選擇本地
在這裏插入圖片描述

Nuxt與vue不同之處

vue項目的路由,需要在router.js中自己去定義,然後指向某個compoent。
而Nuxt不同,nuxt不需要去定義。根據pages目錄下的文件自動生成。
在這裏插入圖片描述
訪問路徑依次如下

http://localhost:3333 對應 pages/index.vue
http://localhost:3333/page/ 對應 pages/page/index.vue

部署nuxt.js

nuxt.js部署有兩種模式(不是方式),第一種模式是生成純寫死的靜態頁面,第二種模式是生成ssr模式的頁面。大多數生成ssr模式的,如果是靜態的沒有必要再用Nuxt非那麼大周折了。

靜態生成的方式地址 https://www.nuxtjs.cn/guide/commands

ssr模式的
分別執行
npm install
npm run build
構建完成後,將如下圖的四個文件目錄拷貝到部署服務器的新建的目錄下
在這裏插入圖片描述
拷貝到特定目錄下如下,執行
npm install
然後執行npm start
在這裏插入圖片描述
啓動完成後如下
在這裏插入圖片描述
當然了,你可以通過pm2進行管理,安裝pm2執行npm install -g pm2
安裝完成後,執行
pm2 start npm --name "ssrweb" -- run start
在這裏插入圖片描述
ssrweb的demo可以查看一下
https://gitee.com/cnhellorui/some_source_code/tree/master/ssrweb

electron項目

electron項目有一些api,可以通過訪問官網查看
vue init simulatedgreg/electron-vue my-project 自動生成一個electron-vue的模板,能夠快速開發
上面命令可能出現下載失敗的問題,解決方式

https://github.com/SimulatedGREG/electron-vue 的代碼下來丟項目裏
vue init ./electron-vue my-project

electron.js 打包成exe

cd src/renderer目錄下,然後執行npm run build。第一次因爲下載依賴情況,可能會很慢。
在這裏插入圖片描述
在這裏插入圖片描述
有個electron項目,很簡單的,可以下載玩玩,快速瞭解。
https://github.com/marsdl-620up-tech/fileup
http://fileup.marsdl.com/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章