作为一个本来是java开发的搬运工,在公司前端人员缺乏的时候,就直接顶上来开发前台页面了(话说我已经很久很久没写java代码了(;′⌒`))

好吧言归正传,刚开始弄前台就是vue,vue2还没弄熟,老板说vue-cli3出来了,你要不用最新的吧,下面就是踩过的坑

-------------------------------------------第一步-------------------------------------------

首先vue-cli3对node版本要求比较高,需要8.9以上的(我的正好是8.9.3,所以没去弄node了省事了)

不过你也可以用nvm去管理node这样比较方便点,随时切换版本

关于旧版本vue-cli已经改成了@vue/cli

如果你已经全局安装了旧版本,你需要先卸载一下

命令是:npm uninstall vue-cli -g

然后安装新包

命令是:npm install @vue-cli -g

安装后:vue -V  查看一下版本,检查一下你是否安装成功

-------------------------------------------第二步-------------------------------------------

就是创建项目了,vue3搞了两种方式创建项目,一种是和以前一样的命令,还有就是在浏览器里一图形化创建

命令创建:vue create hello-word

图像化创建:vue ui  这个时候浏览器就会打开一个窗口

我用的命令创建

1选: Manually select features

2选:(空格键是选择/取消 要装的东西,上下键滑动)回车确定下一步

3选:选择n

4选:你也可以选择less,看个人需求吧

5选:这里选的ESLint+Prettier

6选:Lint on save

7选:

8选:是否保存这次安装记录作为下次安装

这里之后就开始安装中了......

------------------------------第三步---------------------------------

装好之后,命令切到hello-world项目目录下

运行命令:npm run serve

@vue/cli3搭建的新项目,没有vue-cli2 的build和config文件夹
所以有什么配置可以在根目录新建一个vue.config.js写上配置项
这里是修改接口和关闭eslint检查
module.exports = {
    lintOnSave: false,
    devServer: {
         port: 8081
    }
}

-------------------------------------------------------------------

可能装的过程没那么顺利,建议先以管理员身份打开命令行

当我安装国际化i18n时报了个错

npm install 报错sill pacote range manifest for hmac-drbg@^1.0.0 fetched
使用 https://registry.npmjs.org/ 也报错
使用 npm config set registry http://registry.cnpmjs.org/后就不报错了。

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

-------------------------------------------------------

补充-----还有vue3在创建项目里中报这个错:

ERROR  command failed: npm install --loglevel error --registry=https://registry.npm.taobao.org --di

我搜了很多最终用下面这个方法解决了

打开这个文件

这个值开始是true,改成false再重新创建项目就ok了

亲测有效!!!!!!!!

vue-cli3安装过程的更多相关文章

  1. vue.js 安装过程(转载)

      一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核 ...

  2. vue.js安装过程(npm安装)

    一.开发环境 vue推荐开发环境: Node.js: JavaScript运行环境(runtime),不同系统直接运行各种编程语言 npm: Nodejs下的包管理器. webpack: 它主要的用途 ...

  3. VUE项目安装

    连接转载:https://www.cnblogs.com/Colwill-Blog/p/6682091.html 刚刚开始学习Vue.js.今天分享一下我的Vue项目安装过程. 我是windows系统 ...

  4. 安装VUE Cli3 框架方法

    下面为大家介绍一下怎样安装  VUE Cli3的步骤 官网地址  https://cli.vuejs.org/zh/guide/installation.html 一.首先要检查一下是否安装node环 ...

  5. vue 安装教程(自己安装过程及遇到的一些坑)

    1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd ...

  6. 全局安装 Vue cli3 和 继续使用 Vue-cli2.x

    官方链接:https://cli.vuejs.org/zh/guide/installation.html 1.安装Vue cli3 关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @ ...

  7. vue.js的安装部署+cnpm install 安装过程卡住不动----亲测可用

    1.到Node.js的官网下载node node.js的下载地址,下载完成后,我在d盘新建一个文件夹“node”, 安装到node目录下(安装之后环境变量自动配置了,自己无需再配),比如我的安装路径是 ...

  8. 01-路由跳转 安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题

    2==解决vue2.0里面控制台包的一些语法错误. https://www.jianshu.com/p/5e0a1541418b 在build==>webpack.base.conf.j下注释掉 ...

  9. vue cli3超详细创建多页面配置

    1.首先按照vue cli3 给的入门文档下载个vue cli3 如果之前下载了vue cli2的要先卸载之前的 2.检查安装是否成功 3.ok,现在环境搭建好了,新建项目 vue create he ...

随机推荐

  1. compare.go

    package clientv3 import (     pb "github.com/coreos/etcd/etcdserver/etcdserverpb" ) type C ...

  2. 国内第一本micropython的书出版《机器人Python极客编程入门与实战》

    第一本micropython的书<机器人Python极客编程入门与实战>. 购买地址:https://item.taobao.com/item.htm?spm=2013.1.w4018-1 ...

  3. laravel 中路由的快速设置(只需一个控制器名就ok) 不用具体到方法

    routes/web.php 设置路由 Route::group(['middleware' => ['\iqiyi\Http\Middleware\VerifyCsrfToken::class ...

  4. CSS 盒模型与box-sizing

    一.盒模型 一个web页面由许多html元素组成,而每一个html元素都可以表示为一个矩形的盒子,CSS盒模型正是描述这些矩形盒子的存在. MDN的描述: When laying out a docu ...

  5. Django模板修炼

    引言:由于我们在使用Django框架时,不会将HTML代码采用硬编码的方式,因为会有以下缺点: 1:对页面设计进行的任何改变都必须对 Python 代码进行相应的修改. 站点设计的修改往往比底层 Py ...

  6. go语言调度器源代码情景分析之六:go汇编语言

    go语言runtime(包括调度器)源代码中有部分代码是用汇编语言编写的,不过这些汇编代码并非针对特定体系结构的汇编代码,而是go语言引入的一种伪汇编,它同样也需要经过汇编器转换成机器指令才能被CPU ...

  7. Spring Boot入门(六):使用MyBatis访问MySql数据库(注解方式)

    本系列博客记录自己学习Spring Boot的历程,如帮助到你,不胜荣幸,如有错误,欢迎指正! 本篇博客我们讲解下在Spring Boot中使用MyBatis访问MySql数据库的简单用法. 1.前期 ...

  8. 前端vue系列-起始篇 vue的基本认知

    hi,大家伙,我是佛系大大,很高兴与你们一起沟通,学习,进步. 很久不更新博客了,现在回来再写博客,尽然是有些怀念的感觉,幸福的感觉.因为写博客,内心会很宁静,沉浸在自己的世界中,是很幸福的一件事.当 ...

  9. Android之Fragment详解

    文章大纲 一. 什么是Fragment二. Fragment生命周期三. Fragment简单实例四.Fragment实战五.项目源码下载六.参考文章   一. 什么是Fragment Fragmen ...

  10. Spring之AOP详解

    文章大纲 一.AOP介绍二.Spring的AOP实战三.AOP常用标签四.项目源码及参考资料下载五.参考文章   一.AOP介绍 1. 什么是AOP 在软件业,AOP为Aspect Oriented ...