vue學習一：新建或打開vue項目（vue-cli2）

vue-cli3的操做參考文章：vue/cli 3.0腳手架搭建，淺談vue-cli 3 和 vue-cli 2的區別

一、前期準備：

• node.js環境，安裝node
• npm或者cnpm（npm的淘寶鏡像，在命令行中輸入 npm install -g cnpm --registry=http://registry.npm.taobao.org。因爲有些npm有些資源被屏蔽或者是國外資源的緣由，常常會致使用npm安裝依賴包的時候失敗，因此須要npm的國內鏡像---cnpm）
• vue-cli 腳手架構建工具，構建項目（在命令行中運行命令 cnpm install -g vue-cli）

-------------------------------------------------------------------------------------------------------------------------------------------------------------

2019/8/14更新：

vue3.x版本使用命令：

npm install -g @vue/cli

或

yarn global add @vue/cli

 

二、用vue-cli構建項目

進入要建立項目目錄的工做區，好比選擇桌面來存放新建的項目：cd desktop

在命令行中運行命令 vue init webpack firstVue。解釋一下這個命令，這個命令的意思是初始化一個項目，其中webpack是構建工具，也就是整個項目是基於webpack的。其中firstVue是整個項目文件夾的名稱，這個文件夾會自動生成在你指定的目錄中（個人實例中，會在桌面生成該文件夾），運行初始化命令的時候回讓用戶輸入幾個基本的選項，如項目名稱，描述，做者等信息，若是不想填直接回車默認就好。

打開firstVue文件夾，項目文件以下所示，這就是腳手架的做用，搭建工做平臺。（目錄介紹）

（1） Build：項目構建（webpack）相關代碼;

（2） config：配置目錄，包括端口號等。

（3） node_modules：npm加載的項目依賴模塊

（4） src：這個目錄當中的內容包含了咱們基本上要作的事情，這裏包含了幾個文件：

　　assets：存放圖片

　　components：存放組件文件

　　App.vue：項目入口文件，組件也能夠直接寫在這裏不適用components

　　main.js：核心文件

（5） static：靜態資源目錄

（6） test：初始測試目錄

（7） .xxxx：配置文件，包括git配置和語法配置等

（8） index.html：首頁

（9） package.json：項目配置文件

（10） README.md：說明文檔

 三、安裝依賴資源

 這個項目如今還只是一個結構框架，整個項目須要的依賴資源都尚未安裝，依賴的資源在package.json文件（package.json文件能夠手工編寫，也可使用npm init命令自動生成）中有列出來。

要安裝依賴包，首先cd到項目文件夾（firstVue文件夾），而後運行命令 cnpm install ，等待安裝。

安裝完成以後，會在咱們的項目目錄firstVue文件夾中多出一個node_modules文件夾，這裏邊就是咱們項目須要的依賴包資源。

npm install 能夠一條命令同時安裝多個包，包之間用空格分隔。包會被安裝進 node_modules 目錄中。

--save-dev 會把安裝的包和版本號記錄到 package.json 中的 devDependencies 對象中。

 --save， 會記錄到 dependencies 對象中。

它們的區別：

打包工具和測試工具用到的包，用 --save-dev 存到 devDependencies， 好比 eslint、webpack。

瀏覽器中執行的 js 用到的包存到 dependencies， 好比 jQuery 等。

四、運行項目

在項目目錄中，運行命令 npm run dev ，會用熱加載的方式運行咱們的應用，熱加載可讓咱們在修改完代碼後不用手動刷新瀏覽器就能實時看到修改後的效果。

這裏簡單介紹下 npm run dev 命令，其中的「run」對應的是package.json文件中，scripts字段中的dev，也就是 node build/dev-server.js命令的一個快捷方式。

項目運行成功後，瀏覽器會自動打開localhost:8080（若是瀏覽器沒有自動打開，能夠手動輸入）。

整理自：如何運行vue項目

如何運行從github上down下來的項目