我要跑vue项目,所以我要搞vue。

1、环境搭建

进入node官网下载对应版本的node,一步步安装即可。

安装会自动配置路径和npm包管理环境,通过node -v进行验证

2、安装vue-cli脚手架

Vue CLI文档:https://cli.vuejs.org/zh/guide/

# 卸载旧版本
npm uninstall vue-cli -g
# 指定地址安装,加快速度
npm install -g @vue/cli --registry=https://registry.npm.taobao.org

安装完成后,进行验证

vue
vue --version

完成上面的步骤后,我们就可以使用vue-cli新建项目。

3、使用vue-cli新建项目

3.1 图形化界面创建项目

使用vue ui命令,会打开一个网页

C:\Users\lxp>vue ui
Starting GUI...
Ready on http://localhost:8000

按提示走应该就可以了,下面试试命令行创建。

3.2 命令行创建项目

运行以下命令来创建一个新项目:

vue create 项目名

首先进入某个特定文件夹,输入创建命令,注意项目名不能包含大写字母

命令输入正确的情况下, 会让你选择创建vue-2还是vue-3的项目,根据需要选择,然后等待项目创建成功

生成的项目结构如下

根据它的提示启动项目

cd vue-test
# 等同于npm run dev
npm run serve

访问即可

vue环境搭建以及使用vue-cli创建项目的更多相关文章

  1. Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目

    前言: 最近一直在使用阿里的NG-ZORRO(Angular组件库)开发公司后端的管理系统,写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善.因此这篇文章主要是对这段时间 ...

  2. 前端(二十三)—— Vue环境搭建

    目录 一.Vue环境搭建 一.Vue环境搭建 1.安装node 去官网下载node安装包 傻瓜式安装 万一安装后终端没有node环境,要进行node环境变量的配置(C:\Program Files\n ...

  3. Vue环境搭建、创建与启动、案例

    vue环境搭建 """ 1) 安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 安装cnpm npm install - ...

  4. vue环境搭建与创建第一个vuejs文件

    我们在前端学习中,学会了HTML.CSS.JS之后一般会选择学习一些框架,比如Jquery.AngularJs等.这个系列的博文是针对于学习Vue.js的同学展开的. 1.如何简单地使用Vue.js ...

  5. Vue环境搭建及第一个helloWorld

    Vue环境搭建及第一个helloWorld 一.环境搭建 1.node.js环境安装配置  https://www.cnblogs.com/liuqiyun/p/8133904.html 或者 htt ...

  6. jeecms v9 vue环境搭建

    一.安装NODEJS运行环境 前往nodejs官网下载nodejs,https://nodejs.org/en/ ,建议下载最新稳定版的,下载后安装即可,下载选择类似如下 安装完毕之后,在cmd中输入 ...

  7. 55.Vue环境搭建

    Vue环境搭建 在搭建过程中出现的错误解决办法  https://www.cnblogs.com/lovebing/p/9488198.html      cross-env使用笔记   cross- ...

  8. NET Core 环境搭建和命令行CLI入门

    NET Core 环境搭建和命令行CLI入门 2016年6月27日.NET Core & ASP.NET Core 1.0在Redhat峰会上正式发布,社区里涌现了很多文章,我也计划写个系列文 ...

  9. NET Core 环境搭建和命令行CLI入门[转]

      NET Core 环境搭建和命令行CLI入门 时间:2016-07-06 01:48:19      阅读:258      评论:0      收藏:0      [点我收藏+]   标签: N ...

  10. Vue环境搭建和项目创建

    目录 vue项目 环境搭建 项目创建 vue项目 环境搭建 node node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城 ...

随机推荐

  1. 企业更需要定制化CRM系统满足个性化需求

    随着市场的发展和信息技术的进步,越来越多的企业购买CRM客户关系管理系统来帮助管理.提高效率.但哪怕处在相同行业的企业,他们对于CRM的功能需求都会有着很大的不同.因此,大部分企业都开始进行个性化定制 ...

  2. opencv——形态学深究(分析和应用)

    摘要: 形态学一般指生物学中研究动物和植物结构的一个分支.用数学形态学(也称图像代数)表示以形态为基础对图像进行分析的数学工具. 基本思想是用具有一定形态的结构元素去度量和提取图像中的对应形状以达到对 ...

  3. ES6学习-1 啥是ES6啊

    我不准备刨根问底,找寻他的十八辈祖先,希望用最简单的方式能够说明白ES6是个啥,come on baby ES6的全称是ECMAScript 6.0,他于2015 年 6 月正式发布,它的目标是使得 ...

  4. [DB] 关系型数据库

    名词 数据库(database):保存有组织的数据的容器,是通过DBMS创建的容器 表(table):某种特定类型数据的结构化清单 元组(tuple):行,一条数据库记录,对应一个事物 属性(prop ...

  5. Hive 默认分隔符

    引言 Hive 中的默认分隔符是 ^A (\001) ,这是一种特殊的分隔符,使用的是 ASCII 编码的值,键盘是打不出来的 查看 Hive 默认分隔符文件 Linux 上的文件 以 \001 作为 ...

  6. 【JVM进阶之路】十三:类加载过程

    通过前面的学习,我们了解了Class文件的结构,在Class文件中描述的各类信息,最终都需要加载到虚拟机中之后才能被运行和使用. 接下来,我们开始学习JVM的类加载. 一个类从被加载到虚拟机内存中开始 ...

  7. window系统安装mysql

    下载地址(其他图形界面) https://dev.mysql.com/downloads/windows/installer/如果下载win7 64位,在下载后出现不兼容,可以在window窗口菜单中 ...

  8. Kali Linux 2021.2 发布 (Kaboxer, Kali-Tweaks, Bleeding-Edge & Privileged Ports)

    Kali Linux 简介 Kali Linux 是基于 Debian 的 Linux 发行版,旨在进行高级渗透测试和安全审核.Kali Linux 包含数百种工具,可用于各种信息安全任务,例如渗透测 ...

  9. Javascript和Typescript语言类型

    静态语言(强类型语言) 静态语言是在编译时变量的数据类型即可确定的语言,多数静态类型语言要求在使用变量之前必须声明数据类型. 例如:C++.Java.Delphi.C#等. 动态语言(弱类型语言) 动 ...

  10. 用OpenCV进行摄像机标定

    用OpenCV进行摄像机标定 照相机已经存在很长时间了.然而,随着廉价针孔相机在20世纪末的引入,日常生活中变得司空见惯.不幸的是,这种廉价伴随着它的代价:显著的扭曲.幸运的是,这些常数,通过校准和一 ...