原文出处:https://segmentfault.com/a/1190000008922234

第一步 node环境安装

1.1 如果本机没有安装node运行环境,请下载node 安装包进行安装
1.2 如果本机已经安装node的运行换,请更新至最新的node 版本
下载地址:https://nodejs.org/en/ 或者 http://nodejs.cn/

第二步 node环境检测

为了快乐的使用命令行,我们推荐使用 gitbas
1.1 下载git 并安装
下载地址 https://git-for-windows.githu...
安装成功后 右键菜单

我们可以看到 Gti Bash Here 。说明我们已经安装成功git
1.2 检测node 是否安装成功
右键空白,选择 Gti Bash Here 弹出

1.2.1 在终端输入 node -v

如果输出版本号,说明我们安装node 环境成功
随便我们可以查看 npm 的 版本号
可以使用 npm -v

第三步 vue-cli脚手架安装

2.1 如果访问外网比较慢,可以使用淘宝的镜像 https://npm.taobao.org/
打开命令终端 npm install -g cnpm --registry=https://registry.npm.taobao.org
回车之后,我就可以可以快乐的用 cnpm 替代 npm

看到这样

恭喜你,你已经成功安装了 cnpm
但是此后,我们还是使用 npm 来运行命令

2.2 接下来就是重点了 安装vue-cli
npm install vue-cli -g

如果你很幸运,那么接下来就是这样的

我们成功了

2.3 进入我们的项目目录,右键 Gti Bash Here
2.4 初始化项目 vue init webpack vue-demo

一直回车直到

是否要安装 vue-router 项目中肯定要使用到 所以 y 回车

是否需要 js 语法检测 目前我们不需要 所以 n 回车

是否安装 单元测试工具 目前我们不需要 所以 n 回车

是否需要 端到端测试工具 目前我们不需要 所以 n 回车

接下来 ctr+c 结束

2.5 进入 cd vue-demo

2.6 执行 npm install

如果出现下图,说明安装成功

2.7 接下来执行 npm run dev

默认浏览器会自动打开

注意:如果您的浏览器是ie9以下的版本,请升级浏览器到最新版本或者下载谷歌浏览器或者火狐浏览器进行预览。在地址栏输入 http://localhost:8080/#/进行访问

vue-cli创建vue项目的更多相关文章

  1. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

  2. vue cli创建的项目 当你后期使用了ES6语法,如何解决浏览器兼容问题

    最近开发了一个项目,开发过程中,由于需要使用了async await ,于是发现,只有少数的浏览器支持,极大多数的浏览器是不支持这玩意的,在网上各种找解决方案,基本都是失败,最后总结了两个方案之后,尝 ...

  3. 用vue ui创建的项目怎么关闭eslint校验

    在Vue Cli的控制面板找到配置-ESLint configuration,然后关闭保存时检查就可以了

  4. Vue CLI及其vue.config.js(一)

    有时候我们为了快速搭建一个vue的完整系统,经常会用到vue-cli,vue-cli用起来很方便而且命令简单容易上手,但缺点是在构建的时候我感觉有一些慢,因为CLI 服务 (@vue/cli-serv ...

  5. 解决@vue/cli 创建项目是安装chromedriver时失败的问题

    最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...

  6. 用vue脚手架创建bootstrap-vue项目

    用vue脚手架创建bootstrap-vue项目 框架的地址:https://bootstrap-vue.js.org/docs/ 第一步 vue init webpack demo第二步 cd de ...

  7. [Vue CLI 3] vue inspect 的源码设计实现

    首先,请记住: 它在新版本的脚手架项目里面非常重要 它有什么用呢? inspect internal webpack config 能快速地在控制台看到对应生成的 webpack 配置对象. 首先它是 ...

  8. 用Angule Cli创建Angular项目

    Angular4.0来了,更小,更快,改动少 接下来为Angular4.0准备环境和学会使用Angular cli项目 1.环境准备: 1)在开始工作之前我们必须设置好开发环境 如果你的机器上还没有安 ...

  9. Vue CLI 创建项目

    使用命令创建VUE项目 运行以下命令[vue create [项目名]]来创建一个新项目: vue create hello-world 警告 如果你在 Windows 上通过 minTTY 使用 G ...

  10. 使用vue/cli 创建一个简单的项目

    首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...

随机推荐

  1. 腻子脚本polyfill

    腻子脚本 具体是指一段可以给老版本浏览器(ie9以前的版本)带来新特性的javascript脚本代码.如轻量级的脚本代码或Modernizr,Modernizr除了能让ie支持html5新元素之外,还 ...

  2. 《Linux内核原理与设计》第十一周作业 ShellShock攻击实验

    <Linux内核原理与设计>第十一周作业 ShellShock攻击实验 分组: 和20179215袁琳完成实验及博客攥写 实验内容:   Bash中发现了一个严重漏洞shellshock, ...

  3. 【Python学习笔记】Coursera课程《Using Python to Access Web Data 》 密歇根大学 Charles Severance——Week2 Regular Expressions课堂笔记

    Coursera课程<Using Python to Access Web Data > 密歇根大学 Charles Severance Week2 Regular Expressions ...

  4. centos7系统安装配置

    下载centos7 iso镜像 电脑里面本来有ubuntu系统,直接在u盘做好启动盘安装即可,选择手动分区(忘了),将原本ubuntu系统分区压缩200G.系统不要选择最小化,选择gnome的图形界面 ...

  5. linux驱动基础系列--Linux 串口、usb转串口驱动分析

    前言 主要是想对Linux 串口.usb转串口驱动框架有一个整体的把控,因此会忽略某些细节,同时里面涉及到的一些驱动基础,比如字符设备驱动.平台驱动等也不进行详细说明原理.如果有任何错误地方,请指出, ...

  6. gnu app url[web][5星]

    http://www.gnu.org/software/software.zh-cn.html http://linux.chinaunix.net/news/2010/12/07/1175310.s ...

  7. Mac下使用brew搭建PHP7+nginx+mysql开发环境

    http://blog.csdn.net/mysteryhaohao/article/details/52230634 HomeBrew brew的安装,直接上官网:http://brew.sh/ 一 ...

  8. UVALive 6426

    UVALive 6426 /** 题意:给一个n*m的矩阵,求某一个区间的数的数量 做法:刚开始想用树状数组,但是RE,题目中说数据是从二进制流中读入, 用scanf会挂掉 所以用fread 读入 s ...

  9. NYOJ 116 士兵杀敌二

    士兵杀敌(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:5   描述 南将军手下有N个士兵,分别编号1到N,这些士兵的杀敌数都是已知的. 小工是南将军手下的军师,南将军经常 ...

  10. 【转载】C++ typedef用法小结

    http://www.cnblogs.com/charley_yang/archive/2010/12/15/1907384.html 第一.四个用途 用途一: 定义一种类型的别名,而不只是简单的宏替 ...