vue探索[0]:安裝和建立專案

以centOS為例，記錄vue的安裝。
通常如果只安裝vue的話直接
yum install vue
就行了，但是一般進行開發都是通過nodejs npm安裝vue-cli腳手架進行工程開發，所以先從安裝nodejs開始。

安裝Nodejs

• 官網：https://nodejs.org/
• nodejs包含了npm

兩種方式安裝：

方法一：

直接通過自帶的包管理安裝，sudo yum -y install nodejs

方法二：

下載包安裝，進入官網下載頁面，選擇相應系統的包下載。

##解壓xz包
xz -d node-v16.6.0-linux-x64.tar.xz 
##解壓tar包
tar -xvf node-v16.6.0-linux-x64.tar
 

解壓後的檔案1級目錄結構，我們的npm node就放在bin目錄下：

解壓後我習慣將包統一放在/usr/src/目錄下，所以sudo mv node-v16.6.0-linux-x64 /usr/src/.

接下來進行環境配置：

sudo vim /etc/profile

在結尾新增路徑export PATH=$PATH:/usr/src/node-v16.6.0-linux-x64/bin;,結束後ESC:wq儲存並退出vim。

立刻生效配置：source \etc\profile
到這裡就完成了第一個方法的安裝

驗證安裝

node -v #輸出node版本
npm -v  #輸出npm版本

安裝vue-cli

兩個都安裝完備後，進入正題安裝vue-cli腳手架，腳手架通過npm安裝，安裝之前可以修改一下軟體軟體源，下載速度會快一些。

## 修改國內源
npm config set registry http://registry.npm.taobao.org/
## -g 全域性安裝vue
npm install -g @vue/cli

然後靜靜等待安裝，結束後vue -V或vue --version能輸出版本資訊就表示OK了。

vue-cli 建立專案/常用命令

## vue create 專案名稱建立專案
vue create build-name

vue專案結構如下：

• node_modules -----> 第三方庫依賴
• public -----> 第三方庫依賴
• static -----> 靜態資源目錄
• src -----> 主要開發的目錄
  • assets: 放置一些圖片
  • components: 元件資料夾
  • App.vue: 專案入口檔案
  • main.js: 核心檔案。
• package.json -----> 專案配置檔案

其他

因為node_modules存放了大量的第三方庫依賴，一般上傳git的時候是忽略的，在專案沒有node_modules時，可通過以下命令進行還原。

## 還原第三方庫依賴
npm install