使用vue-cli搭建vue項目

使用vue開發項目的前期工作可以參考前面寫的:  Vue環境搭建及node安裝過程整理

Vue.js 提供一個官方命令行工具，可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。

只需幾分鍾即可創建並啟動一個帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目：

# 全局安裝 vue-cli

$ npm install --global vue-cli

# 創建一個基於 webpack 模板的新項目

$ vue init webpack my-project

$ vue init webpack test     //輸入命令

? Project name (test) test
? Project name test
? Project description (A Vue.js project) 測試項目
? Project description 測試項目
? Author lxx1024
? Author lxx1024
? Vue build standalone
? Install vue-router? (Y/n) Y     //安裝路由
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n       //Eslint驗證,很嚴謹,所以選擇n
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n) Y
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n) Y
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "test".

   To get started:

     cd test
     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.github.io/webpack

# 安裝依賴，走你

$  cd my-project    //進入到項目的根目錄--直接進入到該文件夾即可

$ npm install        //安裝依賴包

$ npm run dev     //運行項目

 

下面是運行結果

> npm install > phantomjs-prebuilt@2.1.15 install C:\Users\81487\Desktop\test\node_modules\phantomjs-prebuilt
> node install.js

PhantomJS not found on PATH
Downloading https://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-windows.zip
Saving to C:\Users\81487\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip
Receiving...

Error making request.
Error: connect ETIMEDOUT 54.231.81.168:443
    at Object.exports._errnoException (util.js:1020:11)
    at exports._exceptionWithHostPort (util.js:1043:20)
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1090:14)

Please report this full log at https://github.com/Medium/phantomjs
test@1.0.0 C:\Users\81487\Desktop\test
+-- autoprefixer@7.1.5
| +-- browserslist@2.5.1
| | `-- electron-to-chromium@1.3.26
| +-- caniuse-lite@1.0.30000746
| +-- normalize-range@0.1.2
.................
.................
| +-- html-entities@1.2.1
| +-- querystring@0.2.0
| `-- strip-ansi@3.0.1
|   `-- ansi-regex@2.1.1
`-- webpack-merge@4.1.0

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN karma-sinon-chai@1.3.2 requires a peer of sinon@^2.1.0 but none was installed.
npm ERR! Windows_NT 10.0.10240
npm ERR! argv "E:\\nodejs\\node.exe" "E:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! node v6.11.4
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE

npm ERR! phantomjs-prebuilt@2.1.15 install: `node install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the phantomjs-prebuilt@2.1.15 install script 'node install.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the phantomjs-prebuilt package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node install.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs phantomjs-prebuilt
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls phantomjs-prebuilt
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\81487\Desktop\test\npm-debug.log

 > npm run dev > node build/dev-server.js

> Starting dev server...
 DONE  Compiled successfully in 15700ms23:48:41

> Listening at http://localhost:8080