使用vue-cli创建vue2项目的实战步骤详解

目录
  • 前言
  • 第一步：搭建node运行环境，根据操作系统选择相应安装包
  • 第二步：安装webpack
  • 第四步：创建项目
  • 总结

前言

说明！！！：Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。所以使用脚手架创建vue2的项目，需要先全局安装一个桥接工具，然后创建一个vue2的项目：

第一步：搭建node运行环境，根据操作系统选择相应安装包

下载地址：https://nodejs.org/en/download/

检验是否安装成功，命令行中直接输入node -v，返回版本号即可。

第二步：安装webpack

npm install webpack –g

第三步：安装脚手架

npm install -g @vue/cli-init

准备工作完成后，在硬盘上找到项目最终存放的文件夹，直接在上方输入cmd，点击回车，进入到小黑窗口。

第四步：创建项目

使用vue init webpack my-project命令创建项目，其中my-project为项目名称，然后根据提示，配置项目的相关属性信息，其中包括项目名称、项目描述、作者，是否使用路由等相关设置。

配置完项目信息后，等待项目的创建，项目创建后，根据命令行工具的提示，cd到项目目录，然后输入提示信息，会自动开启一个本地服务器。

然后将网址复制到浏览器中，即可访问创建的程序。

总结

到此这篇关于使用vue-cli创建vue2项目的文章就介绍到这了,更多相关vue-cli创建vue2项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue使用vue-cli快速创建工程

    vue使用vue-cli快速创建工程

    本文介绍了vue使用vue-cli快速创建工程,分享给大家,具体如下: vue-cli安装 npm i vue-cli -g vue init webpack-simple vue-todos vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. -g代表全局安装. i就是install的缩写. 其中webpack-simple代表模板的名称.vue-todos是你给自己的项目起的名称,这个随便起. 配置完成后,可以看到目录下多出了一个项目

  • 五分钟教你使用vue-cli3创建项目(新手入门)

    五分钟教你使用vue-cli3创建项目(新手入门)

    目录 一.搭建vue环境 二.Vue脚手架工具 三.创建项目 四.选择manually select (enter键确认,并进入下一步) 五.选择完成之后回车 这里我们选择3.x的 六.完成之后回车 出现以下界面 七.回车 出现以下界面 八.回车出现以下界面 九.回车出现以下界面 十.回车出现以下界面 十一.回车出现以下界面 十二.根据提示,启动项目 一.搭建vue环境 安装Nodejs 官网下载Nodejs,如果希望稳定的开发环境则下LTS(Long Time Support)长期支持版,稳定

  • 使用vue-cli创建项目的图文教程(新手入门篇)

    本文是针对对于完全没有了解过vue 和npm,连运行环境和项目构建的都不会的小白,对于前端老司机的就不用看了,浪费时间. 使用npm 与vue-cli 构建vue 项目 第一步:安装运行环境(node与npm) nodeJ官网:http://nodejs.cn/下载安装包( 安装) 安装完成后,需要检测是否安装成功 使用命令行cmd 打开dos 黑窗口,运行 node -v 和 npm –v,出现版号说明安装成功 注(npm 是node自带的,在安装node时已经安装了) 如何升级npm 的版本

  • Vue使用vue-cli创建项目

    Vue使用vue-cli创建项目

    本文介绍了Vue使用vue-cli创建项目,分享给大家,具体如下: vue-cli 是一个官方发布vueJS项目脚手架:https://github.com/vuejs/vue-cli 我创建的模板项目:https://github.com/Aleczhang1992/my-vue-project/tree/dev 一.步骤 1.要求已安装Node.js (>=4.x, 6.x preferred) and Git. 可以设置cnpm可以提升依赖包下载速度: npm install -g cnp

  • 使用vue-cli创建vue2项目的实战步骤详解

    目录 前言 第一步:搭建node运行环境,根据操作系统选择相应安装包 第二步:安装webpack 第四步:创建项目 总结 前言 说明!!!:Vue CLI >= 3 和旧版使用了相同的 vue 命令,所以 Vue CLI 2 (vue-cli) 被覆盖了.所以使用脚手架创建vue2的项目,需要先全局安装一个桥接工具,然后创建一个vue2的项目: 第一步:搭建node运行环境,根据操作系统选择相应安装包 下载地址:https://nodejs.org/en/download/ 检验是否安装成功,命

  • 使用Vue CLI创建typescript项目的方法

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue create my-vue-typescript 上下键选择,空格键确定 接下来是一些常规选项 下面是询问要不要记录这次配置以便后面直接使用,我们选择y 当确定配置后会在C:\Users\Administrator\.vuerc下生成一个刚选好的配置记录 { "useTaobaoRegistry"

  • 使用maven创建普通项目命令行程序详解

    使用maven创建普通项目命令行程序详解

    目录 引言 下载并配置Maven maven项目的构建 通过Maven配置mysql.myBtais.myBtais-plus maven命令工具 引言 maven是一个软件项目管理工具,其核心是基于项目对象模型(POM project object model),即就是通过对其生成的pom.xml进行配置来管理项目的构建,报告和文档的.其功能包括两部分,一是对项目依赖jar包的管理,二是提供项目的构建.打包.测试等命令 下载并配置Maven 参考地址:百度 maven项目的构建 打开idea,

  • ios 使用xcode11 新建项目工程的步骤详解

    xcode11新建项目工程,新增了scenedelegate这个类,转而将原Appdelegate负责的对UI生命周期的处理担子接了过来.故此可以理解为:ios 13以后,Appdelegate负责处理App生命周期,scenedelegate负责处理UI生命周期的处理. 1.使用scenedelegate(iOS 13以下黑屏) 如果创建app支持的最低版本是ios13,可以考虑直接使用. 举例使用系统底部栏: - (void)scene:(UIScene *)scene willConnec

  • Vue源码之rollup环境搭建步骤详解

    目录 搭建环境 建立rollup配置文件 创建入口文件 打包前准备 打包 测试一下 搭建环境 第一步 进行初始化,在终端输入npm init -y生成package.json文件,可以记住所有开发相关的依赖. 第二步 --在终端输,入安装依赖 npm install rollup rollup-plugin-babel @babel/core @babel/preset-env --save-dev 注: 安装rollup打包工具,可能需要编译高级语法所以需要安装babel,安装babel需要在

  • Idea2020.2创建JavaWeb项目(部署Tomcat)方法详解

    Idea2020.2创建JavaWeb的方式略有改动,以下做个记录 1.创建项目不再是Java Enterprise了,而是先New 一个普通Java项目 2.创建项目后,选择Run->Edit Configuration->左上角加号->Tomcat Server(注意不是TomEE)->Local 3.点击Application右边的Configure,找到你放置的Tomcat的目录,点击OK 4.选择你运行项目调试项目的浏览器,我的电脑安装的是New Edge,你可以自行选择

  • 使用PyCharm创建Django项目及基本配置详解

    pycharm是个很不错的python开发工具,大大缩短了python项目的创建时间以及调试时间 在使用python写脚本一段时间后,想尝试使用Django来编写一个python项目,现做以下记录备忘: 1.创建项目 如果本地没有安装与所选python版本对应Django版本,pycharm会自动下载相应的版本: 创建后运行项目,默认页面为http://127.0.0.1:8000/,打开后: 出现上面的页面,则正面项目创建成功 目录结构: 2.创建APP 在Django项目中可以包含多个APP

  • Ubuntu 14.04下创建Genymotion安卓虚拟机的步骤详解

    Ubuntu 14.04下创建Genymotion安卓虚拟机的步骤详解

    前言 Genymotion 来自于 AndroVM 这个开源项目,基于 x86 和 VirtualBox,支持 OpenGL 加速,可以用于 Mac/Win/Linux. 最近工作开发环境有Windows切换到了Ubuntu,以前在Windows环境下使用Genymotion搞Android开发还蛮好用的.那么在Ubuntu环境下桌面创建Genymotion虚拟机呢,今天搞搞试试看-!-! Virtualbox 先安装虚拟机软件Virtualbox,没有安装这个软件不能够使用Genymotion

  • vue+echarts实现中国地图流动效果(步骤详解)

    vue+echarts实现中国地图流动效果(步骤详解)

    @vue+echarts实现中国地图流动效果 #话不多说看效果图 操作步骤: 执行命令:npm run echarts -s 并回车 看到这样的提示代表安装成功 PS:网络不好的情况建议用cnpm淘宝镜像(全局终端执行命令:npm i -g cnpm --registry=https://registry.npm.taobao.org) 下载china.js 链接: https://pan.baidu.com/s/1EODVh9tJNEbFebbrhKyd_Q 提取码: gjz4 引入 impo

  • vue cli实现项目登陆页面流程详解

    vue cli实现项目登陆页面流程详解

    目录 1. 搭建项目 1.1 使用vue-cli创建项目 1.2 通过npm安装element-ui 1.3 导入组件 2 创建登录页面 2.1 创建登录组件 2.2 引入css(css.txt) 2.3 配置路由 2.4 在Login组件中将提交按键调整为100%宽度 2.5 运行效果 3. 后台交互 3.1 引入axios 3.2 axios/qs/vue-axios安装与使用 3.2.1 安装axios 3.2.2 发送get请求 3.2.3 发送post请求 3.2.4 简化axios使

随机推荐