做為一名學(xué)習(xí)路上的小白，起初就對 vue.js 有著莫名的好感，知道 vue.js 也能實現(xiàn) angular.js 的雙向綁定等一些功能后，妥妥的先把 angular.js 和 node.js 丟到后面再去學(xué), 看了看 vue 文檔，首先要搭建一個開發(fā)環(huá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下的一個包管理工具，它可以很方便的幫你管理（可以簡單理解為下載）各類前端的框架或插件，類似于PHP的composer，Twitter 的 Bower 一樣。使用Vue不需要安裝NodeJS，這里下載NodeJS只是為了使用其內(nèi)置的NPM工具，所以不需要你有任何的NodeJS基礎(chǔ)，只需要運行 npm install vue 命令，即可把 Vue 的最新版本下載至 node_modules 文件夾。如果你只是想手動引入 Vue ，只需要在「https://vuejs.org/js/vue.js」進行下載，或者通過CDN進行引入 。

2.安裝淘寶鏡像

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

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

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

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

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

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

cnpm install webpack -g

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

4.安裝 webpack

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

vue init webpack my-first-vue-project

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

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

?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)

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

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

5. 用CD命令行查找進入到工程目錄

6.安裝依賴

在當(dāng)前工程目錄下輸入命令行：

cnpm install

安裝完成之后，在電腦上回到 my-first-vue-project 這個文件夾，里面會多一個 node_modules 文件夾。

7. 啟動項目
接下來繼續(xù)輸入以下命令行：

npm run dev

服務(wù)器啟動成功之后，下面就會給出一串指令告訴你:

Listening at http://localhost:8080

然后到瀏覽器進入這個頁面可以看見這樣的頁面：

這樣就表示開發(fā)環(huán)境搭建結(jié)束啦。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論