使用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. Conda下安装libsvm

    如何在canda下安装libsvm? 版本:Python是2.7 canda2 首先想到的是去Python官网上找libsvm的包,结果并没有. 这是因为libsvm是c语言编写的并不是一个Pytho ...

  2. 2018.11.02 洛谷P2831 愤怒的小鸟(状压dp)

    传送门 状压一眼题. 直接f[i]f[i]f[i]表示未选择状态为iii时的最小次数. 然后考虑现在怎么转移. 显然可以直接枚举消掉某一个点或者某两个点,复杂度O(n22n)O(n^22^n)O(n2 ...

  3. android studio友盟分享demo运行报错Gradle's dependency cache may be corrupt解决方法

    gradle-wrapper.properties里修改了gradle的版本,与之前没有报错的项目gradle版本一致.

  4. 使用docker 安装 GITLIB

    在安装 gitlib 社区版时,配置老不成功,改成使用docker安装 比较顺利,省事. 1外部卷配置 docker 需要配置一些卷在外部,创建一下git的目录 我们创建一个在home下 创建一个gi ...

  5. 创建Java程序并设置快捷提示

    1.new Java project 创建项目 2.new package 创建包,cn.com.test 3.创建Java文件 4.Java智能提示的设置 window/preference 在Au ...

  6. 补全爬取的url

    有时爬取到的href不全,如href=‘/11031/’解决方法:from urllib import parseurl=parse.urljoin(response.url,get_url)resp ...

  7. Nios内部RAM固化配置

    选择BSP Editor->Settings ->Advanced->hal->linker,然后勾选allow_code_at_reset.当然如果勾选enable_alt_ ...

  8. asp.net下配置使用Memcached 如何使用Memcached .ne使用BeITMemcached.dllt配置Memcached的方法

    首先在项目中引用 BeITMemcached.dll 在Web.config中配置节点 <configSections> <section name="beitmemcac ...

  9. html5 ajax多图片可预览上传图片

    最近不是特别忙,我就利用html5写了个上传图片(或其他文件)的页面,主要利用是html5的file api,此页面比较简陋,没做样式的优化,包含上传图片预览,多图片上传,上传进度条(利用html5的 ...

  10. 1.9yield方法

    yield()方法的作用放弃当前的cpu资源,将他让给其他的任务去占用cpu的执行时间,但放弃的时间不确定,有可能刚放弃,马上又获得cpu时间片 测试 package com.cky.thread; ...