使用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