手把手带你安装vue-cli并创建第一个vue-cli应用程序

目录
  • 引言：
  • 1. 配置环境
    • 1.1 安装Node.js
    • 1.2 打开cmd管理员模式
    • 1.3 升级npm版本
    • 1.4 使用淘宝镜像的命令：
    • 1.5 安装vue-cli
  • 2. 创建第一个Vue-Cli应用程序
    • 2.1 创建一个Vue项目
    • 2.2 cmd管理员模式下进入该目录
    • 2.3 创建一个基于webpack模板的vue应用程序
    • 2.4 初始化
    • 2.5 安装更新插件
    • 2.6 更新依赖包
    • 2.7 用IDEA打开myvue文件夹
    • 2.8 命令窗口中运行项目
    • 2.8 停止项目运行
  • 总结

引言：

最近看狂神的Vue教程，发现里面关于vue-cli的安装教程已经比较老了，于是自己摸索了一套vue-cli的安装教程，欢迎大佬们指正~

1. 配置环境

1.1 安装Node.js

  • Node.js：下载 | Node.js 中文网 安装就是无脑的下一步就好，安装在自己的环境目录下
  • cmd下输入node -v，查看是否能够正确打印出版本号即可！
  • cmd下输入npm -v，查看是否能够正确打印出版本号即可！
    • 这个npm，就是一个软件包管理工具，就和linux下的apt软件安装差不多！

1.2 打开cmd管理员模式

1.3 升级npm版本

npm install -g npm	-- 默认升级为最新版本

查看npm版本

npm -v

重新加载项目依赖(一定要执行)

npm install

1.4 使用淘宝镜像的命令：

npm config set registry https://registry.npm.taobao.org

查看是否配置成功：

npm config get registry

1.5 安装vue-cli

npm install -g @vue/cli

注：-g代表全局安装

vue cli的包名称由vue-cli改成了@vue/cli 如果你再以前已经安装了vue-cli 那么你需要先将老版本卸载。

安装缓慢，耐心等待，若卡住不动鼠标点击命令窗户后按几下回车~~~

卸载命令：

npm uninstall vue-cli -g

卸载完成后再去安装新版本cli

我这里一堆警告，代表依赖包过时了，不过问题不大，先不要管他╮(╯▽╰)╭

查看vue版本号：

vue -V

说明vue-cli安装成功

2. 创建第一个Vue-Cli应用程序

2.1 创建一个Vue项目

我们随便建立一个空的文件夹在电脑上，我这里在D盘下新建一个目录

D:\狂神Vue

2.2 cmd管理员模式下进入该目录

2.3 创建一个基于webpack模板的vue应用程序

#myvue是项目名称，可以根据自己的需求起名(尽量全小写)
vue init webpack myvue

一路都选择no即可；

说明：

  • Project name：项目名称，默认回车即可
  • Project description：项目描述，默认回车即可
  • Author：项目作者，默认回车即可
  • Install vue-router：是否安装vue-router，选择n不安装（后期需要再手动添加）
  • Use ESLint to lint your code:是否使用ESLint做代码检查，选择n不安装（后期需要再手动添加)
  • Set up unit tests:单元测试相关，选择n不安装（后期需要再手动添加）
  • Setupe2etests with Nightwatch：单元测试相关，选择n不安装（后期需要再手动添加）
  • Should we run npm install for you after the,project has been created:创建完成后直接初始化，选择n，我们手动执行；运行结果！

2.4 初始化

cd myvue
npm install

依旧是很多警告，接下来就来更新这些依赖包

2.5 安装更新插件

npm install -g npm-check-updates

2.6 更新依赖包

检查可更新列表：

ncu

根据提示信息，执行命令，直接更新到package.json：

ncu -u

根据提示，安装依赖即可完成更新 ：

npm install -g

注：可以看到我这里运行npm install报错，进行全局安装则没问题

再次检查可更新列表：

所有依赖都已更新到最新版本(●'◡'●)

2.7 用IDEA打开myvue文件夹

2.8 命令窗口中运行项目

npm run dev

运行成功O(∩_∩)O

浏览器访问http://localhost:8080

成功！！！

2.8 停止项目运行

在cmd页面按CTRL + c

总结

到此这篇关于手把手带你安装vue-cli并创建第一个vue-cli应用程序的文章就介绍到这了,更多相关安装vue-cli并创建应用程序内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 安装vue-cli的简易过程

    安装vue-cli的前提是你已经安装了npm,安装npm你可以直接下载node的安装包进行安装.你可以在命令行工具里输入npm -v 检测你是否安装了npm和版本情况.出现版本号说明你已经安装了npm和node,如果该命令不可用,需要安装node软件包,根据你的系统版本选择下载安装就可以了. 一.安装vue-cli 在命令行工具输入: npm install vue-cli -g -g:代表全局安装.用vue -V 来检查你安装版本号(-V,是大写的) 二.初始化项目 我们用vue init 命

  • vue-cli安装使用流程步骤详解

    1.全局安装vue-cli cnpm i vue-cli -g 2.监测安装版本 vue -V 大写V : version 3.指定目录下新建项目 vue init webpack [项目名] 按自己的意愿配置.选择对应信息.最后配置完成检查package.json是否如此 4.进入到项目 cd demo 5.安装全部依赖(或者在init是选择自动安装) cnpm i 6.安装你需要但是默认没被安装的(比如axios) cnpm i --S vuex axios (上图忘了cd到对应目录,自己安

  • 详解在vue-cli项目中安装node-sass

    详解在vue-cli项目中安装node-sass

    1,使用save会在package.json中自动添加. npm install node-sass --save npm install sass-loader --save 2,通常使用npm安装会出现以下报错,安装失败.(网路问题) 3,可以通过淘宝的npm镜像安装node-sass,解决以上问题. npm install -g cnpm --registry=https://registry.npm.taobao.org (安装淘宝镜像) cnpm install node-sass -

  • vue-cli脚手架的安装教程图解

    vue-cli脚手架的安装教程图解

    vue-cli脚手架模板是基于node下的npm来完成安装,下面给大家介绍vue-cli脚手架的安装,具体内容如下所述: https://github.com/vuejs/vue-cli  官网 使用官方推荐的webpack 条件: node在4.以上,npm在3以上,查看版本号打开cmd输入,node -v npm -v; 安装步骤: 1.cmd打开命令行窗口 2.输入npm install vue-cli -g,然后回车等待 3.安装结束后输入vue 查看是否安装成功 4.运行vueinit

  • 详解vue-cli 脚手架 安装

    一. node安装 1)如果不确定自己是否安装了node,可以在命令行工具内执行: node -v (检查一下 版本): 2)如果 执行结果显示: xx 不是内部命令,说明你还没有安装node , node 安装地址:http://nodejs.cn/download/ 注 :安装 vue-cli 脚手架目前需要node版本为 v4.0 以上: 二. vue-cli 全局安装 命令行执行 : npm install -g vue-cli // 加-g是安装到全局 安装完成以后可以输入命令:vue

  • vue-cli 介绍与安装

    目录 1.前言 2.vue-cli介绍 2.1.CLI 2.2.CLI 服务 2.3.CLI 插件 3.@vue-cli安装 1.前言 vue-cli是和vue进行深度组合的工具,可以快速帮我们创建vue项目,并且把一些脚手架相关的代码给我们创建好.真正使用vue开发项目,都是用vue-cli来创建项目的. 2.vue-cli介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 实现的交互式的项目脚手架. 通过 @vue/cli + @vue/c

  • 手把手带你安装vue-cli并创建第一个vue-cli应用程序

    手把手带你安装vue-cli并创建第一个vue-cli应用程序

    目录 引言: 1. 配置环境 1.1 安装Node.js 1.2 打开cmd管理员模式 1.3 升级npm版本 1.4 使用淘宝镜像的命令: 1.5 安装vue-cli 2. 创建第一个Vue-Cli应用程序 2.1 创建一个Vue项目 2.2 cmd管理员模式下进入该目录 2.3 创建一个基于webpack模板的vue应用程序 2.4 初始化 2.5 安装更新插件 2.6 更新依赖包 2.7 用IDEA打开myvue文件夹 2.8 命令窗口中运行项目 2.8 停止项目运行 总结 引言: 最近看

  • Vue新手指南之创建第一个vue-cli脚手架程序

    Vue新手指南之创建第一个vue-cli脚手架程序

    1. Vue--第一个vue-cli程序 Vue的开发都是要基于NodeJS,实际开发采用Vue-cli脚手架开发,vue-router路由,vuex做状态管理:Vue UI,界面我们一般使用ElementUI(饿了么出品),或者ICE(阿里巴巴出品)来快速搭建前端项目~~ ElementUI ICE 1.1 什么是vue-cli vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板: 预先定义好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个骨架项目,这个

  • 手把手带你安装多个node版本

    手把手带你安装多个node版本

    目录 前言 第一步:下载好需要安装的node程序(不要用安装包,用压缩包,这是坑,安装包安装后面再说) 第二步:选择安装路径(建议安装之前卸载掉之前的node) 第三步:配置环境变量 第四步:将建好的变量配置到 Path中 第五步:切换node版本 另外:安装包 安装教程 第一步:下载合适的安装包 第二步:选择安装路径 第三步:配置环境变量(同上面第三步) 第四步:将建好的变量配置到 Path中(同上面第四步) 第五步:安装新的版本 第六步:切换node版本(同上面第五步) 总结 前言 最近好多

  • 创建第一个ASP.NET应用程序（第1节）

    创建第一个ASP.NET应用程序（第1节）

    这一节我们一起学习创建一个根据用户输入来显示相应的欢迎信息的页面,希望小伙伴们可以和我一起动手操作 学习内容: 第一步,创建ASP.NET程序 1.运行 Visual Studio 2008.在菜单栏中选择"文件" →"新建" →"项目"命令,在弹出的"新建项目"的对话框中,选择左侧的"其他项目类型"树形目录中的"Visual Studio 解决方案"选项,在右边"Visual

  • 使用idea创建第一个Vue项目

    使用idea创建第一个Vue项目

    目录 创建项目 创建项目之后:自动编译 创建项目之后:初始项目架构 项目启动 创建项目 创建项目之后:自动编译 sr/local/bin/node /usr/local/lib/node_modules/npm/bin/npx-cli.js --yes --package @vue/cli vue create --default . npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-ma

  • 利用Python创建第一个Django框架程序

    利用Python创建第一个Django框架程序

    目录 一.环境变量 二.创建Django框架程序 三.控制台 四.实现Django的应用 五.启动项目 六.小结 一.环境变量 右键我的电脑–>>属性–>>高级系统设置–>>高级–>>环境变量–>> 设置PATH属性: 在PATH属性中添加Python的Python.exe安装目录与目录下的Scripts目录: 当设置完这两个属性之后,打开pycharm,就可以自由使用terminal控制台了. 二.创建Django框架程序 依次点击:File–

  • 手把手带你搭建一个node cli的方法示例

    前言 前端日常开发中,会遇见各种各样的 cli,使用 vue 技术栈的你一定用过 @vue/cli ,同样使用 react 技术栈的人也一定知道 create-react-app .利用这些工具能够实现一行命令生成我们想要的代码模版,极大地方便了我们的日常开发,让计算机自己去干繁琐的工作,而我们,就可以节省出大量的时间用于学习.交流.开发. cli 工具的作用在于它能够将我们开发过程中经常需要重复做的事情利用一行代码来解决,比如我们在写需求的时候每新增一个页面就需要相应的增加该页面的初始化代码,

  • 手把手带你封装一个vue component第三方库

    为什么选择自己封装第三方库 最近几个月我司把之前两三年的所有业务都用了 vue 重构了一遍,前台使用 vue+ssr,后台使用了 vue+element,在此过程中封装和自己写了很多 vue component.其实vue 写 component 相当简单和方便,github上有很多的 vue component 都只是简单的包装了一些 jquery 或者原生 js 的插件,但我个人是不太喜欢使用这些第三方封装的.理由如下: 很多第三方封装的组件参数配置项其实是有缺损的.如一些富文本或者图表组件

  • 一篇文章带你了解Vue组件的创建和使用

    一篇文章带你了解Vue组件的创建和使用

    目录 一.什么是组件? 二.创建全局组件 方式一 1.Vue.extend 2.Vue.component 方式二 直接使用Vue.component 方式三 三. 创建局部组件 四.组件中的data 和 methods 五.组件间的通信方式 props/$emit 通过事件形式 总结 一.什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能. 二.创

  • 手把手教你搭建一个vue项目的完整步骤

    手把手教你搭建一个vue项目的完整步骤

    目录 一.环境准备 1.安装node.js 2.检查node.js版本 3.为了提高我们的效率,可以使用淘宝的镜像源 二.搭建vue环境 1.全局安装vue-cli 三.创建vue项目 1.用cmd命令创建项目 1.1创建文件 1.2选择配置信息 1.3选择版本 1.4路径模式选择 1.5语法代码格式检查 1.6第三方文件存在的方式 1.7是否保存本次配置信息(保存预设) 1.8创建成功 1.9运行 1.10启动 1.11停止服务 2.用vue资源管理器创建 2.1进入vue资源管理器界面(vu

随机推荐