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文件能運行則成功。
轉載于:https://www.cnblogs.com/qwangxiao/p/10147408.html
總結
以上是生活随笔為你收集整理的vue.js 三种方式安装--npm安装的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2.数据中心网络演进
- 下一篇： vue项目实现按需加载的3种方式