1. 程式人生 > >安裝Vue 及 創建一個Vue 項目

安裝Vue 及 創建一個Vue 項目

uid 輸出 創建 ref 意思 htm install 之前 ejs

創建一個Vue項目

首先要先安裝node 及 npm 詳情見

【http://www.cnblogs.com/ylboke/p/8342116.html 】及

【http://www.cnblogs.com/ylboke/p/8342185.html 】

安裝Git(Git是一個分布式版本控制系統)詳情見(關於git使用 在之後會記錄)

【http://www.cnblogs.com/wj-1314/p/7993819.html】

首先我們打開ves.js 的官網 【https://cn.vuejs.org/v2/guide/installation.html】

在開始之前首先要確定你的node npm 已經安裝好了 我們可以在命令行中 輸入 【node --version 】 查看node版本 【npm --version】查到npm版本 如果都能輸出他們的版本號 及說明 node 和npm 安裝成功:

安裝Vue :

在Vue 官網中對安裝做出了詳細介紹

技術分享圖片

我們打開命令行工具:打開npm 【npm start】

進行Vue安裝 輸入:

【npm install --global vue-cli】 (-global 意思是全局安裝  這羊Vue會安裝到 安裝node 的文件夾下 否則會安裝到 當前目錄)
# 全局安裝 vue-cli)
技術分享圖片
驗證安裝成功 輸入 【Vue --version】,出現Vue版本號,則說明Vue 安裝成功。

創建項目及依賴安裝:

現在開始使用Vue創建項目:
(可以先進入自己想要創建項目的文件夾中)
技術分享圖片


1.
# 創建一個基於 webpack 模板的新項目 【vue init webpack my-project】 my-project(項目文件夾名)
執行這個命令後命令行會出現一些需要你填寫選擇的項目屬性:
(項目名稱)
(項目描述)
(作者).....
技術分享圖片

should we run npm install.... (這句話是在問是否在工程創建後就去跑 npm 安裝依賴 這裏面有幾個選項 第一個是【是】 也可以選最後一個 稍後自己就安裝依賴 即 在命令行執行npm install 命令 )

技術分享圖片

當看到 這樣的命令說明 Vue項目創建窗成功了

你可以在你選擇的文件加下看到這些文件 (其中node-modules是依賴安裝後出現的,沒安裝依賴以前是沒有node_modules文件夾的)

技術分享圖片

運行測試

進入文件夾 執行運行命令

cd project2

npm run dev

技術分享圖片

技術分享圖片

打開瀏覽器:

技術分享圖片

成功!!


(在運行測試中:的兩句命令 其實是在找 這個Vue項目的package.json 這個文件裏記錄了一下 這個項目的基本信息 像是作者、工具等)

技術分享圖片
技術分享圖片

 

 

 





安裝Vue 及 創建一個Vue 項目