小編給大家分享一下安裝vue.js的方法有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：國際域名空間、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、臨潭網(wǎng)站維護(hù)、網(wǎng)站推廣。

Vue.js（讀音 /vju?/, 類似于 view）是一個構(gòu)建數(shù)據(jù)驅(qū)動的 web 界面的漸進(jìn)式框架。Vue.js 的目標(biāo)是通過盡可能簡單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。它不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。

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

1.獨(dú)立版本

    我們可以在Vue.js的官網(wǎng)上直接下載vue.js,并在.html中通過<script>標(biāo)簽中引用。->  <script src = ../vue.js> </script>  開發(fā)環(huán)境不要使用最小壓縮版，不然會沒有錯誤提示和警告！（頁面中直接使用）

使用vue多頁面開發(fā)：

1. 引入vue.js

2. 創(chuàng)建一個vue根實(shí)例  new Vue({選項(xiàng)})

2.使用cdn方法

• BootCDN（國內(nèi)） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js ， （國內(nèi)不穩(wěn)定）

• unpkg：https://unpkg.com/vue/dist/vue.js, 會保持和 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>）

    3.NPM方法（推薦使用）

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

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

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

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

• cnpm npm的淘寶鏡像

1） 安裝node.js

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

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

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

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

2） 安裝cnpm

在命令行中輸入  npm install -g cnpm --registry=http://registry.npm.taobao.org  ，然后等待，沒報錯表示安裝成功，（我的已經(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

通過以上三部，我們需要準(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（初始化一個完整版的項(xiàng)目） 。解釋一下這個命令，這個命令的意思是初始化一個項(xiàng)目，其中webpack是構(gòu)建工具，也就是整個項(xiàng)目是基于webpack的。其中firstApp是整個項(xiàng)目文件夾的名稱，這個文件夾會自動生成在你指定的目錄中（我的實(shí)例中，會在NodeTest 目錄生成該文件夾），如下圖：

若我們在編輯器中已經(jīng)手動創(chuàng)建了這個項(xiàng)目存放的文件夾cd到項(xiàng)目中：vue init webpack;初始化一下即可,同時還會加載webpack所依賴的包：

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

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

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

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

• Author：作者，如果你有配置git的作者，他會讀取。

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

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

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

• Setup e2e tests with Nightwatch?是否安裝e2e來進(jìn)行用戶行為模擬測試，我們這里不需要，所以輸入n

運(yùn)行初始化命令的時候會讓用戶輸入幾個基本的配置選項(xiàng)，如項(xiàng)目名稱、項(xiàng)目描述、作者信息，對于有些不明白或者不想填的信息可以一直按回車去填寫就好了，等待一會，就會顯示創(chuàng)建項(xiàng)目創(chuàng)建成功，如下圖:

接下來，我們?nèi)oteTest目錄下去看是否已創(chuàng)建文件：

打開firstApp 項(xiàng)目，項(xiàng)目中的目錄如下：

介紹一下目錄及其作用：

build：最終發(fā)布的代碼的存放位置。

config：配置路徑、端口號等一些信息，我們剛開始學(xué)習(xí)的時候選擇默認(rèn)配置。

node_modules：npm 加載的項(xiàng)目所需要的各種依賴模塊。

src：這里是我們開發(fā)的主要目錄（源碼），基本上要做的事情都在這個目錄里面，里面包含了幾個目錄及文件：

assets:放置一些圖片，如logo等

components:目錄里放的是一個個的組件文件

router/index.js：配置路由的地方

App.vue：項(xiàng)目入口組件（跟組件），我們也可以將組件寫這里，而不使用components目錄。主要作用就是將我們自己定義的組件通過它與頁面建立聯(lián)系進(jìn)行渲染，這里面的<router-view/>必不可少。

main.js ：項(xiàng)目的核心文件（整個項(xiàng)目的入口js）引入依賴包、默認(rèn)頁面樣式等（項(xiàng)目運(yùn)行后會在index.html中形成一個app.js文件）。

static：靜態(tài)資源目錄，如圖片、字體等。

test：初始測試目錄，可刪除

.XXXX文件：配置文件。

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

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

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

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

  .babelrc:是檢測es6語法的文件的配置

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

.postcssrc.js:前綴的配置

.eslintrc.js:配置eslint語法規(guī)則（在這里面的rules屬性中配置讓哪個語法規(guī)則失效）

.eslintignore:忽略eslint對項(xiàng)目某些文件的語法規(guī)則的檢查

這就是整個項(xiàng)目的目錄結(jié)構(gòu)，其中，我們主要在src目錄中做修改（模塊化開發(fā)）。這個項(xiàng)目現(xiàn)在還只是一個結(jié)構(gòu)框架，整個項(xiàng)目需要的依賴資源都還沒有安裝。

cd  項(xiàng)目名；進(jìn)入項(xiàng)目中

安裝項(xiàng)目所需要的依賴包/插件（在package.json可查看）：執(zhí)行 cnpm install  (npm可能會有警告，這里可以用cnpm代替npm了，運(yùn)行別人的代碼需要先安裝依賴)如果創(chuàng)建項(xiàng)目的時候沒有報錯，這一步可以省略。如果報錯了  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)目中去看，會多一個node_modules文件夾，這里面就是我們所需要的依賴包資源。

安裝完依賴包資源后，我們就可以運(yùn)行整個項(xiàng)目了。

 運(yùn)行項(xiàng)目

   在項(xiàng)目目錄中，運(yùn)行命令 npm run dev （npm run start），會用熱加載的方式運(yùn)行我們的應(yīng)用，熱加載可以讓我們在修改完代碼后不用手動刷新瀏覽器就能實(shí)時看到修改后的效果。

項(xiàng)目啟動后，在瀏覽器中輸入項(xiàng)目啟動后的地址：

在瀏覽器中會出現(xiàn)vue的logo：

至此，vue的三種安裝方式已介紹完畢。

項(xiàng)目完成后輸入打包命令:cnpm run build;會生成一個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到對應(yīng)的一個項(xiàng)目里面

vue init webpack vue-demo01

cd  vue-demo01

cnpm install   /  npm install          如果創(chuàng)建項(xiàng)目的時候沒有報錯，這一步可以省略。如果報錯了  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這個文件（項(xiàng)目所有的依賴），若沒有cd到項(xiàng)目中安裝項(xiàng)目的依賴：cnpm install/npm install

二、升級：vue-cli3.0

一、使用vue-cli3.0

1. Vue CLI的包名稱由vue-cli改成了@vue/cli

2. 如果你已經(jīng)全局安裝了舊版本的vue-cli(3.0以下)，你需要先通過npm uninstall vue-cli -g/yarn global remove vue-cli卸載它。

3. Node.js8.9+

4. 安裝vue3.0     npm install -g @vue/cli  或者 yarn global add @vue/cli

5. 版本是否是3.x    vue --version/vue -V

• 通過vue-cli創(chuàng)建項(xiàng)目

1. 創(chuàng)建項(xiàng)目命令

vue create 項(xiàng)目名;   項(xiàng)目名不建議存在大寫，中間用-隔開

這時候需要注意創(chuàng)建項(xiàng)目需要預(yù)先安裝的插件：

默認(rèn)的會有Babel + ESLint；但是不建議默認(rèn)，選擇下面：

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Babel //轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。
( ) TypeScript// TypeScript是一個JavaScript（后綴.js）的超集（后綴.ts）包含并擴(kuò)展了 JavaScript 的語法，需要被編譯輸出為 JavaScript在瀏覽器運(yùn)行，目前較少人再用
( ) Progressive Web App (PWA) Support// 漸進(jìn)式Web應(yīng)用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的狀態(tài)管理模式）
( ) CSS Pre-processors // CSS 預(yù)處理器（如：less、sass）
( ) Linter / Formatter // 代碼風(fēng)格檢查和格式化（如：ESlint）
( ) Unit Testing // 單元測試（unit tests）
( ) E2E Testing // e2e（end to end） 測試

等待項(xiàng)目初始化完成。。。。。。

1.cd 到項(xiàng)目里

2.npm run serve   運(yùn)行項(xiàng)目

或者使用圖形化界面創(chuàng)建項(xiàng)目：

vue ui

以上是“安裝vue.js的方法有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文題目：安裝vue.js的方法有哪些
本文鏈接：http://chinadenli.net/article24/ggpcje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、App設(shè)計、建站公司、營銷型網(wǎng)站建設(shè)、品牌網(wǎng)站制作、ChatGPT

廣告

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