使用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. install C:\Users\\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\\AppData\Local\Temp\phantomjs\phantomjs-2.1.-windows.zip
Receiving... Error making request.
Error: connect ETIMEDOUT 54.231.81.168:
at Object.exports._errnoException (util.js::)
at exports._exceptionWithHostPort (util.js::)
at TCPConnectWrap.afterConnect [as oncomplete] (net.js::) Please report this full log at https://github.com/Medium/phantomjs
test@1.0. C:\Users\\Desktop\test
+-- autoprefixer@7.1.
| +-- browserslist@2.5.
| | `-- electron-to-chromium@1.3.
| +-- caniuse-lite@1.0.
| +-- normalize-range@0.1.
.................
.................
| +-- html-entities@1.2.
| +-- querystring@0.2.
| `-- strip-ansi@3.0.
| `-- ansi-regex@2.1.
`-- webpack-merge@4.1. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0. (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN karma-sinon-chai@1.3. requires a peer of sinon@^2.1. but none was installed.
npm ERR! Windows_NT 10.0.
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. install: `node install.js`
npm ERR! Exit status
npm ERR!
npm ERR! Failed at the phantomjs-prebuilt@2.1. 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\\Desktop\test\npm-debug.log
> npm run dev
> node build/dev-server.js > Starting dev server...
DONE Compiled successfully in 15700ms23:: > Listening at http://localhost:8080

使用命令行工具npm新创建一个vue项目的更多相关文章

  1. 开始创建一个 Vue 项目

    开始创建一个 Vue 项目 安装 nodejs 略 安装 npm 默认安装时自带了 npm 安装 cnpm 为了更快的下载组件,使用cnpm,cnpm 是淘宝前端的镜像. 使用 npm 安装 cnpm ...

  2. 创建一个vue项目的过程

    创建一个vue项目: 1.首先从UI手上拿到PSD设计图,然后看设计搞的内容,需要做个大概的页面布局 2.做vue之前不许安装node,因为做vue项目要和node结合使用 3.然后安装vue脚手架: ...

  3. 新手如何创建一个vue项目 ---vue---新手创建第一个项目

    1.第一步安装node.js https://nodejs.org/en/ 前期可以下载软件包,后期熟练以后可以通过nvm进行 Node的版本切换以及升级 然后window+r  输入cmd 打开命令 ...

  4. 使用VSCode创建一个Vue项目

    vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. 安装vue-cli之前,需要先安装了vue和webpack · node -v          //(版本低引起:bas ...

  5. 创建一个vue 项目 必备的几个插件

    第一步npm安装 首先:先从nodejs.org中下载nodejs 打开控制命令行程序(CMD),node -v 检查是否正常 使用淘宝NPM 镜像 npm  install  -g  cnpm  - ...

  6. 创建一个vue项目,vue-cli,webpack

    ,换成淘宝源: npm config set registry https://registry.npm.taobao.org/ 检查是否修改成功 npm config get registry ,安 ...

  7. 使用vue-cli创建一个vue项目

    安装vue-cli npm install -g @vue/cli 1, 使用vue创建一个项目 vue create luffy 2, 安装所需的插件 npm install vue-router ...

  8. 如何利用vue脚手架创建一个vue项目

    1.安装node.js 2.打开命令行查看下npm和node是否都安装好 node -v npm -v 3.安装淘宝镜像cnpm $ npm install -g cnpm --registry=ht ...

  9. 快速创建一个vue项目

    vue脚手架 用来创建vue项目的工具包 创建项目: npm install -g vue-cli vue init webpack VueDemo 开发环境运行: cd VueDemo npm in ...

随机推荐

  1. oracle unix时间戳与date转换

    linux 时间戳 转date:   创建自定义函数: create or replace function unix_to_oracle(in_number number) return date ...

  2. 2018.10.31 bzoj4737: 组合数问题(lucas定理+容斥原理+数位dp)

    传送门 这是一道让我重新认识lucaslucaslucas的题. 考虑到lucaslucaslucas定理: (nm)≡(n%pm%p)∗(npmp)\binom n m \equiv \binom ...

  3. ajax +jsp+iframe无刷新上传文件[转]

    http://hi.baidu.com/zj360202/blog/item/f23e3711f929c774cb80c475.html ajax jsp 无刷新上传文件 2009-10-26 16: ...

  4. warning: this decimal constant is unsigned only in ISO C90问题的处理及理解

    参考:https://blog.csdn.net/duguduchong/article/details/7709482 https://bbs.csdn.net/topics/391892978?p ...

  5. 关于redis,学会这9点就够了

    一.redis是什么 redis是一种支持Key-Value等多种数据结构的存储系统.可用于缓存.事件发布或订阅.高速队列等场景.该数据库使用ANSI C语言编写,支持网络,提供字符串.哈希.列表.队 ...

  6. Le Chapitre I

    Lorsque j'avais six ans j'ai vu, une fois, une magnifique image, dans un livre sur la Forêt[fɔrε] Vi ...

  7. c#中数组array和list在函数间传递 转置

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...

  8. php,微信公众号,获取用户地理位置 定位 经纬度

    <?php //php插件下载地址: https://files.cnblogs.com/files/fan-bk/jssdk_php.rar //建立一个php文件 require_once ...

  9. Windows API编程(一)完整的示范程序

    ## #include <windows.h> LRESULT CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);//回调函数; int APIEN ...

  10. 1085. Perfect Sequence

    Given a sequence of positive integers and another positive integer p. The sequence is said to be a “ ...