在利用vue-cli腳手架搭建vue集成環(huán)境之前，我們需要先安裝nodejs的環(huán)境。如果在cmd中輸入node --version和npm --version出現(xiàn)如下的版本信息，就說明安裝已經(jīng)成功了。

1.全局安裝 vue-cli：??npm install --global vue-cli

（我這邊是以前就已經(jīng)安裝好了，所以這邊顯示的是更新） 2.創(chuàng)建一個基于 webpack 模板的新項目（本地文件下面生成項目的）：vue init webpack myvue 如果速度特別慢的話，可以考慮用國內(nèi)阿里的源碼。命令如下： npm install -g cnpm --registry=https://registry.npm.taobao.org

?

關(guān)于這些選項的含義可以參考這篇博客的內(nèi)容：https://www.jianshu.com/p/2769efeaa10a 我具體摘抄出來給大家解釋一下： vue init webpack vuetest Test是項目名稱，這個名字自己隨便取。 命令輸入后，會進入安裝階段，需要用戶輸入一些信息 Project name (vuetest) 項目名稱，可以自己指定，也可直接回車，按照括號中默認名字（注意這里的名字不能有大寫字母，如果有會報錯Sorry, name can no longer contain capital letters），阮一峰老師博客為什么文件名要小寫 ，可以參考一下。 Project description (A Vue.js project) 項目描述，也可直接點擊回車，使用默認名字 Author (........) 作者，不用說了，你想輸什么就輸什么吧 接下來會讓用戶選擇 Runtime + Compiler: recommended for most users 運行加編譯，既然已經(jīng)說了推薦，就選它了 Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 僅運行時，已經(jīng)有推薦了就選擇第一個了 Install vue-router? (Y/n) 是否安裝vue-router，這是官方的路由，大多數(shù)情況下都使用，不過我的第一個項目中的路由是自己寫的，沒有使用到官方路由，因為有特殊需求，也因為比較早，官方尚未成熟，vue-router官網(wǎng) 。這里就輸入“y”后回車即可。 Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼，ESLint是個代碼風(fēng)格管理工具，是用來統(tǒng)一代碼風(fēng)格的，并不會影響整體的運行，這也是為了多人協(xié)作，新手就不用了，一般項目中都會使用。ESLint官網(wǎng) 接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預(yù)設(shè)，編寫vue項目時的代碼風(fēng)格，因為我選擇了使用ESLint Standard (https://github.com/feross/standard) 標(biāo)準(zhǔn)，有些看不明白，什么標(biāo)準(zhǔn)呢，去給提示的standardgithub地址看一下， 原來時js的標(biāo)準(zhǔn)風(fēng)格 AirBNB (https://github.com/airbnb/javascript) JavaScript最合理的方法，這個github地址說的是JavaScript最合理的方法 none (configure it yourself) 這個不用說，自己定義風(fēng)格 具體選擇哪個因人而異吧 ，我選擇標(biāo)準(zhǔn)風(fēng)格 Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試，我選擇安裝 Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試 ，我選擇安裝 3.進入webpack項目中更新工程依賴，因為現(xiàn)在前端項目會有很多依賴：npm install （這邊需要注意的是：命令框得是由管理員啟動的才可以！！！） 4.運行webpack項目：npm run dev 5.webpack項目打包：npm run build .

轉(zhuǎn)載于:https://www.cnblogs.com/caoxueying2018/p/9679095.html

總結(jié)

以上是生活随笔為你收集整理的利用官方的vue-cli脚手架来搭建Vue集成开发环境的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。