使用命令行工具npm新创建一个vue项目

时间:2023-02-10 12:45:59

使用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. VC++ 一个简单的Log类

    在软件开发中,为程序建立Log日志是很必要的,它可以记录程序运行的状态以及出错信息,方便维护和调试. 下面实现了一个简单的Log类,使用非常简单,仅供参考. // CLogHelper.h : hea ...

  2. Oracle--用变量保存查询出来的值

    1:在我们一般编写存储过程中比较常见的是,习惯将查询出来的一个值赋值给一个变量,这个如何实现呢,用into,代码如下   Select ID into 变量1 from 表 where 条件 2:但当 ...

  3. 优雅的使用Python之软件管理

    上篇<优雅的使用python之环境管理>http://dwz.cn/wTsOr,如何管理python环境,有了一个干净的python环境之后,就不可避免的安装python软件包(pytho ...

  4. OC-苹果官方文档

    苹果官方文档 help>documentation>左边iOS>language>objective>the objective-c programming langua ...

  5. Linux vi编辑器

    vim在内存缓冲区中处理数据 如果在启动vim时未指定文件名,或者这个文件不存在,vim会新开一段缓冲区来编辑. h 左移一个字符 j 下移一行 k 上移一行 l 右边移一个字符 PageDown(C ...

  6. 使用AlertDialog创建对话框的大致步骤

    1.创建AlertDialog.Builder对象,该对象是AlertDialog的创建器.2.调用AlertDialog.Builder的方法为对话框设置图标.标题.内容等.3.调用AlertDia ...

  7. HTML5简单入门系列(八)

    前言 本篇介绍HTML5中相对复杂的一些APIs,其中的数学知识比较多.虽然如此,但是其实API使用起来还是比较方便的. 这里说明一下,只写出API相关的JS代码,因为他们都是基于一个canvas标签 ...

  8. 【POJ 2823 Sliding Window】 单调队列

    题目大意:给n个数,一个长度为k(k<n)的闭区间从0滑动到n,求滑动中区间的最大值序列和最小值序列. 最大值和最小值是类似的,在此以最大值为例分析. 数据结构要求:能保存最多k个元素,快速取得 ...

  9. sql 存储过程学习

    1.存储过程 存储过程可以包含数据操纵语句.变量.逻辑 控制语句等,比如:单个select语句, select语句块,select语句与逻辑控制块. 存储过程优点: 执行速度更快 允许模块化程序设计 ...

  10. Flutter 布局(三)- FittedBox、AspectRatio、ConstrainedBox详解

    本文主要介绍Flutter布局中的FittedBox.AspectRatio.ConstrainedBox,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. FittedBox Scale ...