vue.js 三種方式安裝--npm安裝

　　Vue.js是一個構建數據驅動的 web 界面的漸進式框架。
　　
　　    Vue.js 的目標是經過簡單的 API 實現響應的數據綁定和組合的視圖組件。它不只易上手，便於與第三方庫或既有項目整合。
　　
　　    Vue.js 的安裝方法     1.獨立版本   2.使用CDN方法 3.NPM方法（推薦使用）
　　
　　    NPM方法：
　　
　　 1） 安裝node.js
　　
　　            從node.js官網下載並安裝node，一直點下一步就ok了，安裝完以後，咱們經過打開命令行工具（win+R）,
　　
　　        輸入node -v 命令，查看node的版本，若出現相應的版本號，則說明你安裝成功了。
　　
　　        npm包管理器，是集成在node中的，因此安裝了node也就有了npm,直接輸入 npm -v 命令，顯示npm的版本信息。
　　
　　     2） 安裝cnpm
　　
　　           在命令行中輸入  npm install -g cnpm --registry=http://registry.npm.taobao.org  ，而後等待，沒報錯表示安裝成功。
　　
　　      3） 安裝vue-cli 腳手架構建工具
　　
　　           在命令行中運行命令 npm install -g vue-cli ，而後等待安裝完成。
　　
　　           是否安裝成功：vue -V
　　
　　           webpack的版本查詢：webpack -v       
　　
　　          //若提示webpack不是內容不命令，須要先安裝下webpack  命令： npm install webpack -g
　　
　　===================================上面的環境已近搭好了=========================================
　　
　　            經過以上三部，咱們須要準備的環境和工具都準備好了，接下來就開始使用vue-cli來構建項目。
　　
　　           首先咱們要選擇存放項目的位置，而後再用命令行cd到項目的目錄中，在這裏，我選擇在c盤下建立新的目錄（NodeTest 目錄），用cd 將目錄切到該目錄下，
　　
　　在NodeTest 目錄下，在命令行中運行命令 vue init webpack firstApp（初始化一個完整版的項目） 。
　　
　　         解釋一下這個命令，這個命令的意思是初始化一個項目，其中webpack是構建工具，也就是整個項目是基於webpack的。
　　
　　其中firstApp是整個項目文件夾的名稱，這個文件夾會自動生成在你指定的目錄中。
　　
　　         若咱們在編輯器中已經手動建立了這個項目存放的文件夾cd到項目中：vue init webpack;初始化一下便可,同時還會加載webpack所依賴的包：
　　
　　         輸入命令後，會詢問咱們幾個簡單的選項，咱們根據本身的須要進行填寫就能夠了。
　　
　　Project name :項目名稱 ，若是不須要更改直接回車就能夠了。注意：這裏不能使用大寫，因此我把名稱改爲了vueclitest
　　
　　Project description:項目描述，默認爲A Vue.js project,直接回車，不用編寫。
　　
　　Author：做者，若是你有配置git的做者，他會讀取。
　　
　　Install  vue-router? 是否安裝vue的路由插件，咱們這裏須要安裝，因此選擇Y
　　
　　Use ESLint to lint your code? 是否用ESLint來限制你的代碼錯誤和風格。咱們這裏不須要輸入n（建議），若是你是大型團隊開發，最好是進行配置。
　　
　　setup unit tests with  www.ysyl157.com Karma + Mocha? 是否須要安裝單元測試工具Karma+Mocha，咱們這裏不須要，因此輸入n。
　　
　　Setup e2e tests with Nightwatch?是否安裝e2e來進行用戶行爲模擬測試，咱們這裏不須要，因此輸入n
　　
　　    運行初始化命令的時候會讓用戶輸入幾個基本的配置選項，如項目名稱、項目描述、做者信息，對於有些不明白或者不想填的信息能夠一直按回車去填寫就行了，等待一會，就會顯示建立項目建立成功，以下圖:
　　
　　 接下來，咱們去NoteTest目錄下去看是否已建立文件：
　　
　　  打開firstApp 項目，項目中的目錄以下：
　　
　　    介紹一下目錄及其做用：
　　
　　     build：最終發佈的代碼的存放位置。
　　
　　     config：配置路徑、端口號等一些信息，咱們剛開始學習的時候選擇默認配置。
　　
　　     node_modules：npm 加載的項目所須要的各類依賴模塊。
　　
　　     src：這裏是咱們開發的主要目錄（源碼），基本上要作的事情都在這個目錄裏面，裏面包含了幾個目錄及文件：
　　
　　             assets:放置一些圖片，如logo等
　　
　　             components:目錄裏放的是一個個的組件文件
　　
　　             router/index.yongshiyule178.com js：配置路由的地方
　　
　　             App.vue：項目入口組件（跟組件），咱們也能夠將組件寫這裏，而不使用components目錄。主要做用就是將咱們本身定義的組件經過它與頁面創建聯繫進行渲染，這裏面的<router-view/>必不可少。
　　
　　             main.js ：項目的核心文件（整個項目的入口js）引入依賴包、默認頁面樣式等（項目運行後會在index.html中造成一個app.js文件）。
　　
　　     static：靜態資源目錄，如圖片、字體等。
　　
　　     test：初始測試目錄，可刪除
　　
　　      .XXXX文件：配置文件。
　　
　　     index.html：html單頁面的入口頁面，能夠添加一些meta信息或者同統計代碼啥的或頁面的重置樣式等。
　　
　　     package.json：項目配置信息文件/所依賴的開發包的版本信息及所依賴的插件信息。
　　
　　     README.md：項目的說明文件。
　　
　　     webpack.config.js：webpack的配置文件，把.vue的文件打包成瀏覽器能讀懂的文件。
　　
　　     .babelrc:是檢測es6語法的文件的配置
　　
　　     .getignore:忽略文件的配置（好比模擬本地數據mock不讓他在get提交/打包上線的時候忽略不使用可在這裏配置）
　　
　　     .postcssrc.js:前綴的配置 
　　
　　     .eslintrc.js:配置es www.weilaiyule178.com lint語法規則（在這裏面的rules屬性中配置讓哪一個語法規則失效）
　　
　　     .eslintignore:忽略eslint對項目某些文件的語法規則的檢查
　　
　　    這就是整個項目的目錄結構，其中，咱們主要在src目錄中作修改（模塊化開發）。這個項目如今還只是一個結構框架，整個項目須要的依賴資源都尚未安裝。
　　
　　    cd  項目名；進入項目中
　　
　　    安裝項目所須要的依賴包/插件（在package.json可查看）：執行 cnpm install   (npm可能會有警告，這裏能夠用cnpm代替npm了，運行別人的代碼須要先安裝依賴)若是建立項目的時候沒有報錯，這一步能夠省略。若是報錯了  cd到項目裏面運行  cnpm install   /  npm install
　　
　　若拿到別人的項目或從gethub上下載的項目第一步就是要在項目中cnpm install;下載項目所依賴的插件，而後npm run dev 運行項目
　　
　　    安裝完成以後，咱們到本身的項目中去看，會多一個node_modules文件夾，這裏面就是咱們所須要的依賴包資源。
　　
　　 安裝完依賴包資源後，咱們就能夠運行整個項目了。
　　
　　   運行項目
　　
　　    在項目目錄中，運行命令 npm run dev （npm www.michenggw.com run start），會用熱加載的方式運行咱們的應用，熱加載可讓咱們在修改完代碼後不用手動刷新瀏覽器就能實時看到修改後的效果。
　　
　　    項目啓動後，在瀏覽器中輸入項目啓動後的地址：
　　
　　    在瀏覽器中會出現vue的logo：
　　
　　至此，vue的三種安裝方式已介紹完畢。
　　
　　項目完成後輸入打包命令:cnpm run build;會生成一個dist文件，就是咱們的打包文件，點擊.html文件能運行則成功。