vue.js中如何運行項目

執行專案的方法：1、安裝node和cnpm；2、安裝vue-cli；3、初始化一個專案；4、使用cd指令進入專案資料夾，使用「cnpm install」指令安裝依賴； 5.使用行“ npm run dev”指令即可運行專案。

本教學操作環境：Windows7系統、vue2.9版本，此方法適用於所有品牌電腦。

相關推薦：《vue.js教程》

一開始很多剛入手vue.js的人，會扒GitHub上的開源項目，但是發現不知如何運行GitHub上的開源項目，很尷尬。透過查閱網路教程，成功搭建好專案環境，同時對前段工程化有了朦朧的認知，因此將環境搭建過程分享給大家。

首先，列出來我們需要的東西：

• node.js環境（npm套件管理員）

• ##vue -cli 腳手架建構工具

• cnpm  npm的淘寶鏡像

安裝node.js

從node.js官網下載並且安裝node，安裝過程很簡單，一路「下一步」就可以了（傻瓜式安裝）。

安裝完成之後，開啟命令列工具，輸入 node -v，如下圖，如果出現對應的版本號，則表示安裝成功。

npm套件管理器，是整合在node中的，所以，直接輸入npm -v就會如下圖所示，顯示出npm的版本資訊。

OK！ node環境已經安裝完成，npm套件管理器也有了。由於有些npm有些資源被屏蔽或是國外資源的原因，常常會導致用npm安裝依賴包的時候失敗，所有我還需要npm的國內鏡像---cnpm。

安裝cnpm

在命令列中輸入

npm install -g cnpm --registry=http://registry.npm.taobao.org

然後等待，安裝完成如下圖。

完成之後，我們就可以用cnpm取代npm來安裝依賴套件了。如果想進一步了解cnpm的，請查看淘寶npm鏡像官網。

安裝vue-cli腳手架建置工具

在命令列中執行指令，

cnpm install -g vue-cli

然後等待安裝完成。 (注意，這裡使用cnpm來取代npm，不然速度超級慢，會導致卡在那)

透過以上三部，我們需要準備的環境和工具都準備好了，接下來就開始使用vue -cli來建立專案。

用vue-cli建構項目

要建立項目，首先我們要選定目錄，然後再命令列中把目錄轉到選定的目錄。在這裡，我選擇桌面來存放新建的項目，則我們需要先把目錄cd到桌面，如下圖。

在桌面目錄下，在命令列中執行指令

vue init webpack firstVue

解釋這個指令，這個指令的意思是初始化一個項目，其中webpack是建構工具，也就是整個專案是基於webpack的。其中firstVue是整個專案資料夾的名稱，這個資料夾會自動產生在你指定的目錄中（我的實例中，會在桌面產生該資料夾），如下圖。

運行初始化命令的時候回讓用戶輸入幾個基本的選項，如項目名稱，描述，作者等信息，如果不想填直接回車默認就好。

開啟firstVue資料夾，專案檔案如下所示。

這就是整個專案的目錄結構，其中，我們主要在src目錄中做修改。這個專案現在還只是一個結構框架，整個專案所需的依賴資源都還沒有安裝，如下圖。

安裝專案所需的依賴

#要安裝依賴包，首先cd到專案資料夾（firstVue資料夾），然後運行命令，

cnpm install

等待安裝。

安装完成之后，会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹，这里边就是我们项目需要的依赖包资源。

安装完依赖包之后，就可以运行整个项目了。

运行项目

在项目目录中，运行命令，

 npm run dev

会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

这里简单介绍下 npm run dev 命令，其中的“run”对应的是package.json文件中，scripts字段中的dev，也就是 node build/dev-server.js命令的一个快捷方式。

项目运行成功后，浏览器会自动打开localhost:8080（如果浏览器没有自动打开，可以手动输入）。运行成功后，会看到如下所示的界面。

如果看到这个页面，说明项目运行成功了。

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程教学！！

以上是vue.js中如何運行項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！