1.老版本

Shift+鼠标右键 选择打开命令窗口

1.创建项目之前,需先确保本机已经安装node 在命令窗口中执行node -v npm -v

 

2.一般情况下用npm安装东西比较慢,可以使用淘宝镜像 在命令窗口中执行

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

安装成功之后,cnpm就可以替代npm

 

  1. 安装vue-cli脚手架工具 cnpm install vue-cli -g或者npm install vue-cli -g

    安装之后,在命令窗口中执行vue -V(V为大写)查看是否安装成功,成功会出现版本

    以上步骤成功之后,相当于基础环境已经部署完成,就可以使用npm来创建

    项目了

     

  2. 选择路径,创建项目 如d盘创建一个文件夹,进入文件夹,在命令窗口中

    执行vue init webpack 项目名称(自己命名)

    Project name(项目名称):回车
    Project description(项目介绍):回车
    Author:作者名
    Vue build(是否安装编译器):回车
    Install vue-router(是否安装Vue路由):y 回车
    Use ESLint to lint your code(是否使用ESLint检查js代码):n 回车
    Set up unit tests(安装单元测试工具):n 回车
    Setup e2e tests with Nightwatch(是否安装端到端测试工具):n 回车

    Should we run npm install for you after the project has been created? (recommended):回车。

     

  3. 启动项目

    cd 项目名称

    npm run dev

    浏览器输入localhost: 端口号即可

     

    流程图

     

     

    2.新版本安装与老版本卸载

    TIPS:

    关于旧版本。Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。
    如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

    npm run serve

vue-cli脚手架工具新老版本安装对比的更多相关文章

  1. vue.js---利用vue cli脚手架工具+webpack创建项目遇到的坑

    1.Eslint js代码规范报错 WARNING Compiled with 2 warnings 10:43:26 ✘ http://eslint.org/docs/rules/quotes St ...

  2. grads 新老版本目录对比

    最近不少人都在使用OpenGrADS,最新的版本已经更新到了2.0.a9,具体grads做了哪些更新,在附件里面放了一个,是英文的. 很多人说在使用原来的一些教程的时候找不到相对应的文件夹了,其实仔细 ...

  3. vue/cli新旧版本安装方式

    一.老版本安装  Shift+鼠标右键 选择打开命令窗口 1.创建项目之前,需先确保本机已经安装node 在命令窗口中执行node -v npm -v 2.一般情况下用npm安装东西比较慢,可以使用淘 ...

  4. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  5. 2个版本并存的python使用新的版本安装django的方法

    2个版本并存的python使用新的版本安装django的方法 默认是使用 pip install django 最新版的django会提示  要求python版本3.4以上,系统默认的版本是2.7.5 ...

  6. 05. flex元素水平垂直居中(三种position水平垂直居中和两种新老版本水平垂直居中)

    flex元素水平垂直居中(三种position水平垂直居中和两种新老版本水平垂直居中) (1).position : <!DOCTYPE html> <html lang=" ...

  7. 新老版本vue-cli的安装及创建项目等方式的比较

    vue-cli 3.0 正式版于2018年8月发布,截至到2020年08月05日版本已经更新到4.4.6.Vue CLI 的包名称由 vue-cli 改成了 @vue/cli,目前网上很多的Vue项目 ...

  8. 使用Vue CLI脚手架搭建vue项目

    本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...

  9. vue.cli脚手架初次使用图文教程

    vue-cli作用 vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程. vue-cli使用 !!前提:需要vue和webpack 安装全局vue-cli npm ...

随机推荐

  1. SpringBoot集成H2database

    转载:https://blog.csdn.net/chenhao_c_h/article/details/80332260 h2database为我们提供了十分轻量,十分快捷方便的内嵌式数据库 H2是 ...

  2. CF883J 2017-2018 ACM-ICPC, NEERC, Southern Subregional Contest - J. Renovation 贪心+树状数组

    首先对于一个月的预算,如果非常小的话,我们可以留到后面的 \(a_i\) 最大的月来用,因为 \(a_i\) 越大能够拆建筑的越多. 于是我们把 \(a_i\) 合并给 \(i\) 后面的 \(a\) ...

  3. AGC001[BCDE] 题解

    A没意思 F太难 所以大概近期的AGC题解都是BCDE的 然后特殊情况再说 开始刷AGC的原因就是计数太差 没有脑子 好几个学长都推荐的AGC所以就开始刷了 = = 大概两天三篇的速度?[可能也就最开 ...

  4. shell编程之基础知识1

    1.shell脚本的基本格式 #!bin/bash   ->看到这个就是shell脚本 #filename:test.sh ->脚本名称 #auto echo hello world -& ...

  5. 一次OOM测试并分析

    堆dump文件分析 Java代码: public class HeapTest2 { static class OOMObject { private byte[] arrs = new byte[6 ...

  6. MyBatis框架之异常处理

    MyBatis框架定义了许多的异常类,之所以定义这么多的异常类,应该是将每一种异常情况都独立出来,这样在出现异常时,定位就很明确了.而我们平时写代码时,都是瞎搞一通,异常类大多也是随便定义,或者是使用 ...

  7. mybatis用distinct进行查询的问题

    一:mybatis进行distinct进行查询的时候,数据库中可能有值为null的. 如果直接这样写,这个null的都给计算出来了. select DISTINCT b.b_city from bui ...

  8. STM32 NVIC中断优先级分组说明

    STM32F103系列上面,又只有60个可屏蔽中断(在107系列才有68个) 中断管理方法 首先,对STM32中断进行分组,组0~4.同时,对每个中断设置一个抢占优先级和一个响应优先级值. 分组配置是 ...

  9. 用 Flask 来写个轻博客 (32) — 使用 Flask-RESTful 来构建 RESTful API 之一

    目录 目录 前文列表 扩展阅读 RESTful API REST 原则 无状态原则 面向资源 RESTful API 的优势 REST 约束 前文列表 用 Flask 来写个轻博客 (1) - 创建项 ...

  10. spring boot 尚桂谷学习笔记06 异常处理 ---Web

    ------错误处理机制------ 默认效果 1 返回一个默认的错误页面 浏览器发送请求的请求头:优先接收 text/html 数据 客户端则默认响应json数据 : accept 没有说明返回什么 ...