1.下载node或者是nvm

  node可以直接去node官网下载,http://nodejs.cn/,默认是长期维护的版本

  如果想管理node的版本,可以下载nvm。这个是可选的。但是作为一个前端工程师,接手的项目往往有着用各种各样版本的node开发的情况,所以会经常跟着切换node版本,而此时nvm帮了大忙。如果要使用nvm就不能先下载node(下载了也要卸载),nvm1.1.7-setup.zip,这是nvm官网:http://nvm.uihtm.com/。下载好了nvm后,再通过nvm安装node,或者切换node的版本。

2. 下载npm或者是yarn

  npm会随着官网node的安装顺带就下载了,其版本也是默认的。如果你下载了nvm,可以通过nvm管理node版本。

  npm和yarn都是软件包管理器。

  yarn的下载:

npm install -g yarn

  官方的指导文件:https://www.yarnpkg.cn/getting-started

  可以看出来在同一个项目中yarn的运行速度比npm(已换阿里源)快了一个数量级

3.npm换源

  1>.使用阿里定制的 cnpm 命令行工具代替默认的 npm,输入下面代码进行安装:

npm install -g cnpm --registry=https://registry.npm.taobao.org

  以后安装插件只需要使用cnpm intall即可。

  2>.如果习惯了使用npm,又不想使用cnpm时

  输入以下命令:

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

  再输入:

npm config list 

  可以看到已经换源了

4.下载@vue-cli(区别于老版vue-cli,以下4和5命令是vue3的方式)

npm install -g @vue/cli

5.创建vue项目

方法1:

vue ui

  通过打开图形化界面,可以在页面中创建项目和添加依赖。

方法2:

vue create 项目名

  注意项目名里不能含大写字母,可以使用-将字分开

  这里可以选择是vue2项目还是vue3项目

  注意在什么目录下执行这个命令就会默认将项目安装到这个目录下。

  项目创建完成后,会提示你再执行如蓝色字体所示的命令。

  npm run serve后,可以发现该项目已经执行在8080端口了。

从头创建一个新的vue项目------用npm|yarn下载vue-cli|vue-ui创建vue的更多相关文章

  1. Eclipse中创建一个新的SpringBoot项目

    在Eclipse中创建一个新的spring Boot项目: 1. 首先在Eclipse中安装STS插件:在Eclipse主窗口中点击 Help -> Eclipse Marketplace... ...

  2. Node.js实战1:创建一个新的Node项目。

    你也许在猜专业的Node开发如何创建一个新项目. 有Npm在 ,这会非常简单. 虽然你可以创建一个JS文件,并执行:node file.js,但我建议你使用npm init来先创建一个node项目,这 ...

  3. Laravel 从入门到精通 创建并运行一个新的 Laravel 项目

    创建一个新的 Laravel 项目 正如官方文档所言,有两种方式可以创建一个新的 Laravel 项目,这两种创建方式都是从命令行执行的:第一种是通过全局的 Laravel 安装器,另一种是通过 Co ...

  4. soapui中文操作手册(一)----创建一个新的项目

    1) 创建一个新的项目 点击项目,选择新建项目SOAP.这将打开一个新的SOAP项目对话框. 注意:你也可以做CTRL + N(WIN)或CMD+ N(MAC)来创建一个新的SOAP项目. 在新的SO ...

  5. Jersey 2.x 从Maven Archetype 创建一个新项目

    创建 Jersey 工程需要使用 Apache 的 Maven 软件工程和管理工具.所有的Jersey产品模块都可以在 Maven中央库 中找到.这样的话 Jersey 可以非常容易和其他基于 Mav ...

  6. 实验六:分析Linux内核创建一个新进程的过程

    原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 题目自拟,内容围绕对Linu ...

  7. 以sb7code为基础创建一个基本的OpenGL项目

      以sb7code为基础创建一个基本的OpenGL项目   从github上面下载sb7code代码: https://github.com/openglsuperbible/sb7code 打开H ...

  8. Vue Create 创建一个新项目 命令行创建和视图创建

    Vue Create 创建一个新项目 命令行创建和视图创建 开始之前 你可以先 >>:cd desktop[将安装目录切换到桌面] >>:vue -V :Vue CLI 3.0 ...

  9. 【Cocos2d-x for WP8 学习整理】(1)创建一个新项目

    喜大普奔                         10.1假期之前看到了一个很振奋的消息,就是随着Cocos2d-x 2.2的发布,WP8/WIN8有史以来第一次的合并到主版本了. 之前 V2 ...

随机推荐

  1. IMWEB 前端面试题汇总

    1.什么是盒子模型? CSS中的思维模型,每一个元素都包含margin,padding,boder,content区域,占一个盒子形状,整体称为盒模型. 2.简述一下src与href的区别? Href ...

  2. android webview与jquery mobile相互通信

    最近做android项目中遇到要在webview中做与js交互相关的东东,涉及到js中调用android本地的方法,于是查了资料整理了一下android和js互相调用的过程.如下demo,demo的主 ...

  3. 设计模式之简单工厂SimpleFactory的实现(配置文件)

    <?xml version="1.0" encoding="utf-8" ?> <configuration> <appSetti ...

  4. java集合(arraylist详解)

    一.ArrayList概述 ArrayList是实现List接口的动态数组,所谓动态就是它的大小是可变的.实现了所有可选列表操作,并允许包括 null 在内的所有元素.除了实现 List 接口外,此类 ...

  5. 基于Spring接口,集成Caffeine+Redis两级缓存

    原创:微信公众号 码农参上,欢迎分享,转载请保留出处. 在上一篇文章Redis+Caffeine两级缓存,让访问速度纵享丝滑中,我们介绍了3种整合Caffeine和Redis作为两级缓存使用的方法,虽 ...

  6. Java面试整理(精简版)

    Java面向对象有哪些特征,如何应用 特征(OOP) 解释说明 通俗理解 关系联系 作用 封装 隐藏内部细节,只对外暴露访问方法 属性/方法封装,便于使用,限制不合理操作 类-类 低耦合,高内聚,增强 ...

  7. css 进阶实战项目

    1. html 结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  8. List实现类

     List实现类: ArrayList; 数组结构实现,查询快,增删慢 JDK1.2版本,运行效率快,线程不安全 Vector: 数组结构实现,查询快,增删慢 JDK1.0版本,运行效率慢,线程安全 ...

  9. shell语法习题练习进阶版

    第4章 shell语法深度习题练习 4.1 使用if,case,函数的方法将服务改成system(centos6) 4.1.1 if方法 4.1.1.1 system实现 4.1.1.1.1 编写代码 ...

  10. Persistent Bits - 题解【二进制】

    题面: WhatNext Software creates sequence generators that they hope will produce fairly random sequence ...