如何安裝搭建Vue開發(fā)環(huán)境？針對(duì)這個(gè)問題，今天小編總結(jié)了這篇文章，希望能幫助更多想解決這個(gè)問題的朋友找到更加簡(jiǎn)單易行的辦法。

創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、聞喜網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5頁面制作、商城系統(tǒng)網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為聞喜等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

Vue.js是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計(jì)。Vue 的核心庫(kù)只關(guān)注視圖層，并且非常容易學(xué)習(xí)，非常容易與其它庫(kù)或已有項(xiàng)目整合。另一方面，Vue 完全有能力驅(qū)動(dòng)采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開發(fā)的復(fù)雜單頁應(yīng)用。

Vue.js 的目標(biāo)是通過盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件 。

Vue.js 自身不是一個(gè)全能框架--它只聚焦于視圖層。因此它非常容易學(xué)習(xí)，非常容易與其它庫(kù)或已有項(xiàng)目整合。另一方面，在與相關(guān)工具和支持庫(kù)一起使用時(shí) ，Vue.js 也能完美地驅(qū)動(dòng)復(fù)雜的單頁應(yīng)用。

下面介紹三種 Vue.js 的安裝方法：

1.獨(dú)立版本

我們可以在Vue.js的官網(wǎng)上直接下載vue.js,并在.html中通過<script>標(biāo)簽中引用。->  <script src = ../vue.js> </script>  開發(fā)環(huán)境不要使用最小壓縮版，不然會(huì)沒有錯(cuò)誤提示和警告?。撁嬷兄苯邮褂茫?/p>

2.NPM方法（推薦使用）

在用Vue.js構(gòu)建大型應(yīng)用的時(shí)候推薦使用NPM安裝方法，NPM能很好的和諸如Webpack或者Browserify 模塊打包器配合使用。Vue.js 也提供配套工具來開發(fā)單文件組件。

首先，先列出我們接下來需要的東西：

node.js環(huán)境（npm包管理器）

vue-cli 腳手架構(gòu)建工具

cnpm npm的淘寶鏡像      

3.使用cdn方法

unpkg：https://unpkg.com/vue/dist/vue.js, 會(huì)保持和 npm 發(fā)布的最新的版本一致。（推薦使用）

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js，

如（<script  src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>）

1） 安裝node.js

從node.js官網(wǎng)下載并安裝node，安裝過程很簡(jiǎn)單，一直點(diǎn)下一步就ok了，安裝完之后，我們通過打開命令行工具（win+R）,輸入

node -v 命令，查看node的版本，若出現(xiàn)相應(yīng)的版本號(hào)，則說明你安裝成功了。

             

npm包管理器，是集成在node中的，所以安裝了node也就有了npm,直接輸入 npm -v 命令，顯示npm的版本信息。

             

到目前為止，node的環(huán)境已經(jīng)安裝完成，npm 包管理器也有了，由于有些npm資源被屏蔽或者是國(guó)外資源的原因，經(jīng)常會(huì)導(dǎo)致npm安裝依賴包的時(shí)候失敗，所以我們還需要npm的國(guó)內(nèi)鏡像----cnpm.

2） 安裝cnpm

在命令行中輸入  npm install -g cnpm --registry=http://registry.npm.taobao.org  ，然后等待，沒報(bào)錯(cuò)表示安裝成功，（我的已經(jīng)安裝過了，顯示更新成功的信息），如下圖：

           

完成之后，我們就可以用cnpm代替npm來安裝依賴包了。如果想進(jìn)一步了解cnpm的，查看淘寶npm鏡像官網(wǎng)。

3） 安裝vue-cli 腳手架構(gòu)建工具（必須在全局中進(jìn)行安裝）

在命令行中運(yùn)行命令 npm install -g vue-cli ，然后等待安裝完成。

是否安裝成功：vue -V

webpack的版本查詢：webpack -v

通過以上三部，我們需要準(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)生成在你指定的目錄中（我的實(shí)例中，會(huì)在NodeTest 目錄生成該文件夾），如下圖：

若我們?cè)诰庉嬈髦幸呀?jīng)手動(dòng)創(chuàng)建了這個(gè)項(xiàng)目存放的文件夾cd到項(xiàng)目中：vue init webpack;初始化一下即可,同時(shí)還會(huì)加載webpack所依賴的包：

是否是在本目錄下進(jìn)行創(chuàng)建

       

輸入命令后，會(huì)詢問我們幾個(gè)簡(jiǎn)單的選項(xiàng)，我們根據(jù)自己的需要進(jìn)行填寫就可以了。

1. Project name :項(xiàng)目名稱 ，如果不需要更改直接回車就可以了。注意：這里不能使用大寫，所以我把名稱改成了vueclitest

2. Project description:項(xiàng)目描述，默認(rèn)為A Vue.js project,直接回車，不用編寫。

3. Author：作者，如果你有配置git的作者，他會(huì)讀取。

4. Install  vue-router? 是否安裝vue的路由插件，我們這里需要安裝，所以選擇Y

5. Use ESLint to lint your code? 是否用ESLint來限制你的代碼錯(cuò)誤和風(fēng)格。我們這里不需要輸入n（建議），如果你是大型團(tuán)隊(duì)開發(fā)，最好是進(jìn)行配置。

6. setup unit tests with  Karma + Mocha? 是否需要安裝單元測(cè)試工具Karma+Mocha，我們這里不需要，所以輸入n。

7. Setup e2e tests with Nightwatch?是否安裝e2e來進(jìn)行用戶行為模擬測(cè)試，我們這里不需要，所以輸入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.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：初始測(cè)試目錄，可刪除

     .XXXX文件：配置文件。

    index.html：html單頁面的入口頁面，可以添加一些meta信息或者同統(tǒng)計(jì)代碼啥的或頁面的重置樣式等。

    package.json：項(xiàng)目配置信息文件/所依賴的開發(fā)包的版本信息及所依賴的插件信息。

    README.md：項(xiàng)目的說明文件。

    webpack.config.js：webpack的配置文件，把.vue的文件打包成瀏覽器能讀懂的文件。

    .babelrc:是檢測(cè)es6語法的文件的配置

    .getignore:忽略文件的配置（比如模擬本地?cái)?shù)據(jù)mock不讓他在get提交/打包上線的時(shí)候忽略不使用可在這里配置）

    .postcssrc.js:前綴的配置

    .eslintrc.js:配置eslint語法規(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 run start），會(huì)用熱加載的方式運(yùn)行我們的應(yīng)用，熱加載可以讓我們?cè)谛薷耐甏a后不用手動(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)行則成功。

一、搭建vue的開發(fā)環(huán)境（大綱）

1. 必須安裝node.js
2. 搭建vue的開發(fā)環(huán)境，安裝vue的腳手架工具    官方命令行工具

npm install - -global vue-cli

    3.創(chuàng)建項(xiàng)目   必須cd到對(duì)應(yīng)的一個(gè)項(xiàng)目里面

vue init webpack vue-demo01
cd  vue-demo01
cnpm install   /  npm install 
如果創(chuàng)建項(xiàng)目的時(shí)候沒有報(bào)錯(cuò)，這一步可以省略。如果報(bào)錯(cuò)了  cd到項(xiàng)目里面運(yùn)行  cnpm install   /  npm install 
npm run dev/npm run start

    4.另一種創(chuàng)建項(xiàng)目的方式中小型項(xiàng)目   （推薦）  

vue init webpack-simple vuedemo02
cd  vuedemo02       
cnpm install   /  npm install           
npm run dev

拿到別人的項(xiàng)目不能正常運(yùn)行后看有沒有node_modules這個(gè)文件（項(xiàng)目所有的依賴），若沒有cd到項(xiàng)目中安裝項(xiàng)目的依賴：cnpm install/npm install

關(guān)于安裝搭建Vue開發(fā)環(huán)境的步驟就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

當(dāng)前題目：如何安裝搭建Vue開發(fā)環(huán)境
瀏覽路徑：http://aaarwkj.com/article14/iggdge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、標(biāo)簽優(yōu)化、網(wǎng)站改版、企業(yè)建站、定制開發(fā)、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)