vue.js 三种方式安装--npm安装
Vue.js是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的漸進(jìn)式框架。
? ? Vue.js 的目標(biāo)是通過簡單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。它不僅易上手，便于與第三方庫或既有項(xiàng)目整合。
? ? Vue.js 的安裝方法? ? ?1.獨(dú)立版本???2.使用CDN方法?3.NPM方法（推薦使用）
? ? NPM方法：
?1） 安裝node.js
????????????從node.js官網(wǎng)下載并安裝node，一直點(diǎn)下一步就ok了，安裝完之后，我們通過打開命令行工具（win+R）,
? ? ? ? 輸入node -v 命令，查看node的版本，若出現(xiàn)相應(yīng)的版本號(hào)，則說明你安裝成功了。
? ? ? ? npm包管理器，是集成在node中的，所以安裝了node也就有了npm,直接輸入 npm -v 命令，顯示npm的版本信息。
?????2） 安裝cnpm
???????????在命令行中輸入??npm install -g cnpm --registry=http://registry.npm.taobao.org ?，然后等待，沒報(bào)錯(cuò)表示安裝成功。
??????3） 安裝vue-cli 腳手架構(gòu)建工具
???????????在命令行中運(yùn)行命令 npm install -g vue-cli?，然后等待安裝完成。
???????????是否安裝成功：vue -V
???????????webpack的版本查詢：webpack -v? ? ? ?
? ? ? ? ? //若提示webpack不是內(nèi)容不命令，需要先安裝下webpack? 命令： npm install webpack -g
===================================上面的環(huán)境已近搭好了=========================================
????????????通過以上三部，我們需要準(zhǔn)備的環(huán)境和工具都準(zhǔn)備好了，接下來就開始使用vue-cli來構(gòu)建項(xiàng)目。
? ? ? ? ? ?首先我們要選擇存放項(xiàng)目的位置，然后再用命令行cd到項(xiàng)目的目錄中，在這里，我選擇在c盤下創(chuàng)建新的目錄（NodeTest 目錄），用cd 將目錄切到該目錄下，
在NodeTest 目錄下，在命令行中運(yùn)行命令?vue init webpack firstApp（初始化一個(gè)完整版的項(xiàng)目） 。
? ? ? ? ?解釋一下這個(gè)命令，這個(gè)命令的意思是初始化一個(gè)項(xiàng)目，其中webpack是構(gòu)建工具，也就是整個(gè)項(xiàng)目是基于webpack的。
其中firstApp是整個(gè)項(xiàng)目文件夾的名稱，這個(gè)文件夾會(huì)自動(dòng)生成在你指定的目錄中。
? ? ? ? ?若我們在編輯器中已經(jīng)手動(dòng)創(chuàng)建了這個(gè)項(xiàng)目存放的文件夾cd到項(xiàng)目中：vue init webpack;初始化一下即可,同時(shí)還會(huì)加載webpack所依賴的包：
? ? ? ? ?輸入命令后，會(huì)詢問我們幾個(gè)簡單的選項(xiàng)，我們根據(jù)自己的需要進(jìn)行填寫就可以了。
Project name :項(xiàng)目名稱 ，如果不需要更改直接回車就可以了。注意：這里不能使用大寫，所以我把名稱改成了vueclitest
Project description:項(xiàng)目描述，默認(rèn)為A Vue.js project,直接回車，不用編寫。
Author：作者，如果你有配置git的作者，他會(huì)讀取。
Install ?vue-router? 是否安裝vue的路由插件，我們這里需要安裝，所以選擇Y
Use ESLint to lint your code? 是否用ESLint來限制你的代碼錯(cuò)誤和風(fēng)格。我們這里不需要輸入n（建議），如果你是大型團(tuán)隊(duì)開發(fā)，最好是進(jìn)行配置。
setup unit tests with ?www.ysyl157.com Karma + Mocha? 是否需要安裝單元測試工具Karma+Mocha，我們這里不需要，所以輸入n。
Setup e2e tests with Nightwatch?是否安裝e2e來進(jìn)行用戶行為模擬測試，我們這里不需要，所以輸入n
????運(yùn)行初始化命令的時(shí)候會(huì)讓用戶輸入幾個(gè)基本的配置選項(xiàng)，如項(xiàng)目名稱、項(xiàng)目描述、作者信息，對(duì)于有些不明白或者不想填的信息可以一直按回車去填寫就好了，等待一會(huì)，就會(huì)顯示創(chuàng)建項(xiàng)目創(chuàng)建成功，如下圖:
?接下來，我們?nèi)oteTest目錄下去看是否已創(chuàng)建文件：
??打開firstApp 項(xiàng)目，項(xiàng)目中的目錄如下：
????介紹一下目錄及其作用：
?????build：最終發(fā)布的代碼的存放位置。
?????config：配置路徑、端口號(hào)等一些信息，我們剛開始學(xué)習(xí)的時(shí)候選擇默認(rèn)配置。
?????node_modules：npm 加載的項(xiàng)目所需要的各種依賴模塊。
?????src：這里是我們開發(fā)的主要目錄（源碼），基本上要做的事情都在這個(gè)目錄里面，里面包含了幾個(gè)目錄及文件：
?????????????assets:放置一些圖片，如logo等
?????????????components:目錄里放的是一個(gè)個(gè)的組件文件
?????????????router/index.yongshiyule178.com js：配置路由的地方
?????????????App.vue：項(xiàng)目入口組件（跟組件），我們也可以將組件寫這里，而不使用components目錄。主要作用就是將我們自己定義的組件通過它與頁面建立聯(lián)系進(jìn)行渲染，這里面的<router-view/>必不可少。
?????????????main.js ：項(xiàng)目的核心文件（整個(gè)項(xiàng)目的入口js）引入依賴包、默認(rèn)頁面樣式等（項(xiàng)目運(yùn)行后會(huì)在index.html中形成一個(gè)app.js文件）。
?????static：靜態(tài)資源目錄，如圖片、字體等。
?????test：初始測試目錄，可刪除
??????.XXXX文件：配置文件。
?????index.html：html單頁面的入口頁面，可以添加一些meta信息或者同統(tǒng)計(jì)代碼啥的或頁面的重置樣式等。
?????package.json：項(xiàng)目配置信息文件/所依賴的開發(fā)包的版本信息及所依賴的插件信息。
?????README.md：項(xiàng)目的說明文件。
?????webpack.config.js：webpack的配置文件，把.vue的文件打包成瀏覽器能讀懂的文件。
?????.babelrc:是檢測es6語法的文件的配置
?????.getignore:忽略文件的配置（比如模擬本地?cái)?shù)據(jù)mock不讓他在get提交/打包上線的時(shí)候忽略不使用可在這里配置）
?????.postcssrc.js:前綴的配置?
?????.eslintrc.js:配置es www.weilaiyule178.com lint語法規(guī)則（在這里面的rules屬性中配置讓哪個(gè)語法規(guī)則失效）
?????.eslintignore:忽略eslint對(duì)項(xiàng)目某些文件的語法規(guī)則的檢查
????這就是整個(gè)項(xiàng)目的目錄結(jié)構(gòu)，其中，我們主要在src目錄中做修改（模塊化開發(fā)）。這個(gè)項(xiàng)目現(xiàn)在還只是一個(gè)結(jié)構(gòu)框架，整個(gè)項(xiàng)目需要的依賴資源都還沒有安裝。
????cd??項(xiàng)目名；進(jìn)入項(xiàng)目中
????安裝項(xiàng)目所需要的依賴包/插件（在package.json可查看）：執(zhí)行 cnpm install ??(npm可能會(huì)有警告，這里可以用cnpm代替npm了，運(yùn)行別人的代碼需要先安裝依賴)如果創(chuàng)建項(xiàng)目的時(shí)候沒有報(bào)錯(cuò)，這一步可以省略。如果報(bào)錯(cuò)了??cd到項(xiàng)目里面運(yùn)行??cnpm install???/??npm install
若拿到別人的項(xiàng)目或從gethub上下載的項(xiàng)目第一步就是要在項(xiàng)目中cnpm install;下載項(xiàng)目所依賴的插件，然后npm run dev 運(yùn)行項(xiàng)目
????安裝完成之后，我們到自己的項(xiàng)目中去看，會(huì)多一個(gè)node_modules文件夾，這里面就是我們所需要的依賴包資源。
?安裝完依賴包資源后，我們就可以運(yùn)行整個(gè)項(xiàng)目了。
???運(yùn)行項(xiàng)目
????在項(xiàng)目目錄中，運(yùn)行命令?npm run dev （npm www.michenggw.com run start），會(huì)用熱加載的方式運(yùn)行我們的應(yīng)用，熱加載可以讓我們在修改完代碼后不用手動(dòng)刷新瀏覽器就能實(shí)時(shí)看到修改后的效果。
????項(xiàng)目啟動(dòng)后，在瀏覽器中輸入項(xiàng)目啟動(dòng)后的地址：
????在瀏覽器中會(huì)出現(xiàn)vue的logo：
至此，vue的三種安裝方式已介紹完畢。
項(xiàng)目完成后輸入打包命令:cnpm run build;會(huì)生成一個(gè)dist文件，就是我們的打包文件，點(diǎn)擊.html文件能運(yùn)行則成功。
轉(zhuǎn)載于:https://www.cnblogs.com/qwangxiao/p/10147408.html
總結(jié)
以上是生活随笔為你收集整理的vue.js 三种方式安装--npm安装的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2.数据中心网络演进
- 下一篇： html5倒计时秒杀怎么做,vue 设