nodejs開發環境安裝-連載【1】-企業級系統開發實戰連載系列 -技術棧 ：vue、element-ui、qt、c++、sqlite

• 作者背景描述：
• • 為什么寫此系列文章？
  • 解決方案：
  • 預覽Demo
  • 下載
  • 版本選擇
  • 運行安裝程序
  • 同意條款
  • 安裝路徑
  • 安裝組件
  • • 工具，鉤不需要選。
    • 即將安裝
  • 在開始菜單執行命令行
  • 查看版本號
  • 查看包管理器
  • 添加包鏡像，提升下載包速度
  • 查看是否設置成功
  • 查看包管理器信息
  • 看看能否獲得vue的信息
  • git 安裝
  • 安裝vue
  • 安裝路由
  • 安裝腳手架（命令行工具）
  • 測試vue 安裝情況
  • 創建項目
  • 運行
  • 瀏覽
  • 發布
  • 發布后的文件結構
• 總結

作者背景描述：

本人就職于外資IT企業，擔任電商訂單處理產品開發經理一職，領導過非常多次大小項目的開發工作，對電商平臺訂單處理流程非常熟悉。

公司專注鞋服行業相關軟件開發和服務，公司規模100多人以上，在臺北，廣州，成都，上海，北京，國外等均有分公司。

為什么寫此系列文章？

本人在學校至工作到現在十余年時間，使用.net C# 開發語言，結合在公司實際開發，和市場的需求中，NET.開發的商業企業級系統遇到的缺點有如下：

程序首次加載慢，因為虛擬機編譯的原因。

WINFORM界面開發不夠炫麗，精美。

WINFORM界面設計人員難找。

程序可以被反編譯。

安裝包過大，部署麻煩，framework.

跨平臺不夠好。

解決方案：

結合近年來前端設計的走向，最終選擇了qt+vue+element UI+sqlite(數據庫根據需要情況選擇)

qt負責接口和硬件處理

sqlite做數據存儲

vue+element UI 實現前端。

預覽Demo

下載

訪問https://nodejs.org/en/

版本選擇

選擇左邊的版本，如下圖：

運行安裝程序

同意條款

安裝路徑

安裝組件

工具，鉤不需要選。

即將安裝

在開始菜單執行命令行

查看版本號

執行命令

node -v

查看包管理器

解說：包管理工具作用是為了管理前端開發時使用到的包，插件，工具，命令等。

輸入包管理工具，測試 安裝是否成功

npm -v

添加包鏡像，提升下載包速度

npm config set registry=http://registry.npm.taobao.org

查看是否設置成功

查看包管理器信息

npm config list

看看能否獲得vue的信息

Npm info vue

git 安裝

下載地址

https://git-scm.com/download/win

安裝git只需要點擊 next即可。

因為有些命令會使用git命令進行下載數據。

安裝好git后，關閉cmd 然后重新執行下面的命令。

接著執行下面的安裝。

安裝vue

npm install vue -g

安裝路由

vue-router 提供了前端頁面路由工具，利用它我們能實現頁面跳轉，頁面組件刷新，

按需加載組件，構建單頁的應用。

npm install vue-router -g

安裝腳手架（命令行工具）

命令行工具可以 用來生成vue的項目和項目文件等 。

npm install vue-cli -g

測試vue 安裝情況

vue -V

創建項目

接下來的教程為創建項目，項目名為vue01，命令如下：

vue init webpack vue01

創建的過程中會提示輸入，和按回車

創建完如下：

運行

提示輸入cd vue01切換目錄

cd vue01

執行npm run dev 運行開發模式

npm run dev

瀏覽

后面輸出為您的站點，在瀏覽器輸入就可以，注意不要用IE

發布

執行 npm run build 發布

npm run build

發布后的文件結構

生成靜態文件在dist目錄下，打開dist文件夾下就能看到新生成的index.html文件
直接打開是不行的，需要使用iis或其它服務器。

總結

本節主要講解了環境安裝，項目創建，運行，發布整個流程。
下一節我們講解前端代碼編輯器 vscode開發環境安裝配置。

總結

以上是生活随笔為你收集整理的nodejs开发环境安装-连载【1】-企业级系统开发实战连载系列 -技术栈 ：vue、element-ui、qt、c++、sqlite的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。