快捷導(dǎo)航

詳解vue.js 開發(fā)環(huán)境搭建最簡(jiǎn)單攻略

更新時(shí)間：2017年06月12日 10:32:43 作者：Agrass啊草

本篇文章主要介紹了vue.js 開發(fā)環(huán)境搭建最簡(jiǎn)單攻略，這里整理了詳細(xì)的步驟，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

做為一名學(xué)習(xí)路上的小白，起初就對(duì) vue.js 有著莫名的好感，知道 vue.js 也能實(shí)現(xiàn) angular.js 的雙向綁定等一些功能后，妥妥的先把 angular.js 和 node.js 丟到后面再去學(xué), 看了看 vue 文檔，首先要搭建一個(gè)開發(fā)環(huán)境，因?yàn)樽约禾“?，看了一些搭建開發(fā)環(huán)境的博客，表示專業(yè)術(shù)語太多依然還是一臉懵逼。

具體流程大概如下：

這里寫圖片描述

很難理解？沒關(guān)系，我也沒理解，跟著操作就行了，我是window系統(tǒng)。

1.安裝node.js

起初是很不理解的，我學(xué) vue.js 還要掌握 node.js嗎？這是沒有關(guān)聯(lián)的，NPM是NodeJS下的一個(gè)包管理工具，它可以很方便的幫你管理（可以簡(jiǎn)單理解為下載）各類前端的框架或插件，類似于PHP的composer，Twitter 的 Bower 一樣。使用Vue不需要安裝NodeJS，這里下載NodeJS只是為了使用其內(nèi)置的NPM工具，所以不需要你有任何的NodeJS基礎(chǔ)，只需要運(yùn)行 npm install vue 命令，即可把 Vue 的最新版本下載至 node_modules 文件夾。如果你只是想手動(dòng)引入 Vue ，只需要在「https://vuejs.org/js/vue.js」進(jìn)行下載，或者通過CDN進(jìn)行引入。

2.安裝淘寶鏡像

在這里，有一個(gè)問題，使用 npm 會(huì)導(dǎo)致網(wǎng)速很慢，對(duì)于大陸用戶，建議將 npm 的注冊(cè)表源設(shè)置為國(guó)內(nèi)的鏡像，可以大幅提升安裝速度。

打開命令行，輸入以下命令

npm install -g cnpm --registry= https://registry.npm.taobao.org

這里寫圖片描述

直接復(fù)制上去就好，下面會(huì)出現(xiàn)一串代碼，表示在安裝，無需理會(huì)。

3. 全局安裝 vue-cli 腳手架

繼續(xù)在命令行輸出以下命令：

cnpm install webpack -g

這里寫圖片描述

-g 表示全局，輸出上面的指令之后，下面又會(huì)有一串代碼，表示安裝無需理會(huì)，安裝完成之后可以檢測(cè)一下，輸出 vue ，會(huì)顯示這樣的情況，表示安裝成功。

這里寫圖片描述

4.安裝 webpack

繼續(xù)在命令行輸入以下命令：

vue init webpack my-first-vue-project

創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目，后面的 my-first-vue-project 指的是這個(gè)項(xiàng)目的名稱，你也可以換成其它的。

這里寫圖片描述

然后會(huì)下載安裝這套模板，命令行會(huì)出現(xiàn)幾個(gè)問題，你跟著下面的步驟回答就可以了。

?Project name
?Project description 
?Author 
?Use ESLint to lint your code?(y/n)
?Setup unit test with Karma + Mocha?(y/n)
?Setup e2e tests with Nightwatch?(y/n)

第一行問你項(xiàng)目名稱，輸入 my-first-vue-project
第二行問你項(xiàng)目描述，輸入 this is my vue
第三行問作者的名字，輸入 你自己的名字就好
第四、五、六行都直接在后面輸入 NO 。

這個(gè)項(xiàng)目就初始化完成了，你可以在電腦上查看，在當(dāng)前目錄下就會(huì)多一個(gè)文件夾叫做 my-first-vue-project，里面會(huì)有些文件。

這里寫圖片描述