在進行Vue的開發之前,需要搭建好開發環境,包括安裝Node.js、Vue CLI等工具,以及配置好項目所需的依賴環境。
首先,需要安裝Node.js。Node.js是一個基于Chrome V8引擎的JavaScript運行環境,可以讓JavaScript脫離瀏覽器運行在服務器端。安裝完成后,可以在命令行中通過node -v 命令來檢查是否安裝成功。
$ node -v v12.18.1
接下來,需要安裝Vue CLI。Vue CLI是Vue.js官方提供的一個腳手架工具,致力于簡化Vue項目的搭建過程。可以通過npm全局安裝Vue CLI。
$ npm install -g @vue/cli
安裝完成后,可以通過vue -V命令來檢查Vue CLI的版本信息。
$ vue -V @vue/cli 4.5.13
接下來,可以使用Vue CLI創建一個新的Vue項目。在命令行中進入到需要創建項目的目錄下,然后執行如下命令:
$ vue create my-project
其中,my-project是項目的名稱,可以根據項目的實際需求進行修改。執行上述命令會出現如下提示:
Vue CLI v4.5.13 ? Please pick a preset: (Use arrow keys) ? preset1 preset2 Manually select features
可以選擇默認預設的preset1,也可以手動選擇需要的特性。選擇完成后,會出現如下提示:
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
可以根據實際需求選擇是否啟用路由的history模式。然后會出現一些選項供選擇,選擇完成后,就可以等待Vue CLI創建項目完成。
接下來,進入到創建好的項目目錄,可以看到已經有了項目的基礎文件和目錄結構。其中重要的文件包括App.vue、main.js、index.html等。
$ cd my-project $ ls public src
最后,可以使用npm運行開發服務器,啟動項目。
$ npm run serve
啟動完成后,可以在瀏覽器中訪問http://localhost:8080來查看啟動好的Vue應用程序。這就是使用Vue CLI和Node.js創建Vue項目并啟動開發服務器的過程。