vue3+egg-仿掘金官網

時間 2019-11-30

標籤 vue3+egg vue egg 简体版

原文原文鏈接

看了egg.js後忽然就想搞個全棧的項目玩玩，又喜歡在掘金上逛，因此就開發了這個項目。雖然說vue3.0還沒定下來，但已經能用了，喜歡它的直接在網頁上搞項目，因此就用了3。
GIT地址
 預覽地址有些地方用的假數據html

已完成

● 首頁標籤分類預覽
● 修改我的信息
● 圖片上傳
● 文章詳情
● 發佈沸點vue

預覽

18/12/19 18 文章詳情1.0

18/12/20 11 文章詳情2.0 java

18/12/21 10 昨天把服務器弄好了 http://134.175.224.127:8081/ 訪問會很慢後面再慢慢弄，正好把域名也弄好node

18/12/21 22 動態頁面1.0 mysql

18/12/24 11 動態頁面2.0 增長實時發佈功能 git

項目包含

vue3.0
egg.js
騰訊雲圖片上傳

項目搭建

vue3.0

3的話能夠向以前同樣用命令行建項目，也能夠用圖形化界面來建立，我本身的話是用圖形化界面創建的，這也是選擇3的緣由之一github

//安裝
npm install -g @vue/cli
//查看版本
vue --version
//打開圖形化界面
vue ui
複製代碼

運行成功之後會跳轉到web

選擇你要創建項目的磁盤路徑，而後點擊最下面的按鈕，填寫項目的基本信息

到下一步的話會讓你選擇一些項目依賴，若是是第一次創建的話，能夠選擇Manual而後選擇須要的依賴

接下來會讓你選擇eslint的相關配置，雖然eslint有時候真的是太嚴格了，不過養成習慣之後就會很舒服了，並且這邊提供了保存和提交時自動fix的功能，因此都選上

建立完成之後，能夠點擊右上方的按鈕直接下載想要的插件，有時候甚至會直接幫你在項目中弄好引入，省了手動寫一些引入的代碼

最後就是能夠直接在這邊運行項目了

這些只是基本搭建到運行，還有不少功能能夠本身去發發掘一下。

vue3.0配置跨域

3的話須要本身手動在根目錄下創建vue.config.js，內容的話仍是和之前差很少的，這裏貼上個人簡單的跨域配置sql

egg.js

egg的話，官網寫的仍是挺詳細的，跟着快速入門走一遍基本就差很少了。這裏就貼上基本的鏈接mysql配置npm

騰訊雲上傳

由於涉及圖片上傳的相關東西，因此使用了騰訊雲。先去騰訊雲首頁添加對象存儲

而後建立存儲桶

而後在基礎設置中配置一下cors的白名單

注意這邊的Expose-Headers，不設置的話到時候上傳完之後的回調會沒有url。

而後去這邊把Secretid和SecretKey拿一下後面要用

項目中使用：

//安裝一下
npm install cos-js-sdk-v5 -S

//在須要上傳的文件中
import COS from "cos-js-sdk-v5";

this.myCos = new COS({
      SecretId: "你的id",
      SecretKey: "你的key"
    });
    
//在獲取到上傳文件對象後
this.myCos.putObject(
        {
          Bucket: "你的存儲桶空間名稱",
          Region: "你的存儲桶所在地域",
          Key: e.target.files[0].name,//上傳的文件名
          StorageClass: "STANDARD",
          Body: e.target.files[0], // 上傳文件對象
          onProgress: function(progressData) {
            self.user.avator = progressData.Location;//Location就是上傳完成之後的對象路徑
          }
        },
        function(err, data) {
          console.log(err || data);
          console.log(data.Location);
        }
      );
複製代碼

服務器

購買雲服務器 cloud.tencent.com/act/campus 加購域名(很便宜的那種幾十塊)
解析域名可直接選新手快速添加
登錄服務器配置環境安裝wget yum install -y wget

安裝node wget nodejs.org/dist/v10.14… 解壓 tar -xvf node-v10.14.2-darwin-x64.tar.gz 重命名 mv node-v10.14.2-darwin-x64 node 軟鏈接(全局命令) ln -s ~/node/bin/node /usr/bin/node ln -s ~/node/bin/npm /usr/bin/npm node -v 安裝git yum –y install git 安裝jdk yum -y install java java -version 路徑 /usr/lib/jvm 安裝tomacat yum -y install tomcat rpm -q tomcat 路徑 /usr/share/tomcat

5 環境變量

vi .bashrc

填入 JAVA_HOME=/usr/lib/jvm/java

PATH=JAVA_HOME/bin