一、開發(fā)環(huán)境搭建：安裝node.js環(huán)境以及vue cli工具

(1)安裝node.js

從官網(wǎng)下載對應(yīng)的二進制壓縮包，如下圖：

01.png

解壓到程序安裝目錄

xz -d node-v12.17.0-linux-x64.tar.xz
tar -xvf node-v12.17.0-linux-x64.tar
sudo mv node-v12.17.0-linux-x64 /usr/local/nodejs

編輯配置文件

vim /etc/profile

將node.js的node可執(zhí)行可執(zhí)行文件與npm鏈接所在目錄添加到環(huán)境變量，在文件/etc/profile文件末尾添加以下內(nèi)容

export PATH=/usr/local/nodejs/bin:$PATH

保存文件并執(zhí)行以下命令

source /etc/profile
node -v # 查看本地node版本
npm -v # 查看本地npm版本

若顯示以下類似，則代表安裝成功

02.png

(2)安裝nvm(node版本管理工具)

nvm是node版本管理工具，使用nvm我們可以隨時在切換我們本地的node版本。
nvm項目地址為https://github.com/nvm-sh/nvm
根據(jù)文檔提示，我們只需執(zhí)行一下命令即可完成安裝：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

npm相關(guān)指令以及示例：

nvm -help #查看nvm幫助文檔
nvm --version #查看nvm版本號
nvm ls-remote #列出所有可以安裝的node版本
nvm install v10.14.2 #指定安裝10.14.2版本的node.js
nvm install node #安裝最新的node版本(node為最新版本號的別名)
nvm install --lts node #安裝最新的node長期維護版本
nvm ls #列出本地安裝的node版本
nvm use v12.16.2 #將本地node切換為12.16.2版本

(3)安裝yarn(node包管理工具)

yarn的中文官網(wǎng)https://yarn.bootcss.com/
根據(jù)官方文檔，以Debian/Ubuntu為例，安裝步驟如下：
首先配置軟件倉庫：

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

安裝yarn包

sudo apt update && sudo apt install yarn

安裝完成之后，使用如下命令檢測是否安裝成功：

yarn -v

如果出現(xiàn)相應(yīng)的版本號，則代表安裝成功

(4)安裝vue cli

vue cli官網(wǎng)鏈接：https://cli.vuejs.org/
使用npm全局安裝

npm install -g @vue/cli

或者使用yarn 全局安裝

yarn global add @vue/cli

二、使用命令行創(chuàng)建vue項目

在創(chuàng)建項目之前，我們可以使用如下命令查看相關(guān)的指令幫助文檔

vue vue -h

進入工作目錄，創(chuàng)建名為test的vue項目

vue create test

將光標選擇到手動選擇特性(Manually select features)，如下圖：

03.png

手動移動光標，選擇響應(yīng)的特性，使用空格鍵勾選或者取消勾選，如下圖所示：

04.png

選擇router的history模式，如下圖：

05.png

選擇node-sass模式，如下圖：

06.png

選擇eslint的配置，如下圖：

07.png

選擇eslint保存時檢查代碼，如下圖：

08.png

選擇將配置文件保存在單獨的配置文件中，如下圖：

09.png

選擇時候?qū)⒃O(shè)置作為預(yù)設(shè)，如果輸入y，則是，N則否，如下圖：

10.png

如果選擇是，按回車后還需輸入預(yù)設(shè)名，再按回車等待安裝即可。如果出現(xiàn)如下如所示則代表創(chuàng)建愛你成功，否則你需要檢查一下網(wǎng)絡(luò)和你的環(huán)境，重新創(chuàng)建。

11.png

總結(jié)

以上是生活随笔為你收集整理的vue如何在末尾添加_怎样在Linux上开发vue项目的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。