精华内容
下载资源
问答
  • 如何安装vue-cli 3.x以及怎么使用vue-cli3.x创建项目 安装vue-cli3.x步骤 安装vue-cli3.x版本前,先查看下你的电脑是否安装过vue-cli或是安装过vue-cli2.x版本 vue --version / vue -V 如果有vue-cli2.x版本...

    如何安装vue-cli 3.x以及怎么使用vue-cli3.x创建项目

    安装vue-cli3.x步骤

    安装vue-cli3.x版本前,先查看下你的电脑是否安装过vue-cli或是安装过vue-cli2.x版本

    •   	vue --version / vue -V
      

    如果有vue-cli2.x版本,需要先卸载才能安装vue-cli3.x,卸载完成后就可以安装vue-cli3.x版本咯

    •   	npm uninstall vue-cli -g
      

    安装vue-cli3.x版本

    •   	npm install -g @vue/cli 
      

    查看下是否安装成功

    •   	vue --version / vue -V 
      

    安装完vue-cli3.x版本vue-cli2.x版本就被覆盖掉了

    使用vue-cli3.x创建项目

    打开命令行窗口

    •  	window+R 
      

    如果是在桌面创建项目就cd Desktop 进入桌面输入

    •  	vue create 项目名称
      

    如果是在已经创建好的目录中cd 加目录名,进入到项目的目录中输入

    •  	vue create .
      

    输入命令按回车键,这里会让你选择是默认的(default)还是手动的(Manually) ,按键盘上的上下键就可以选择默认的(default)还是手动的(Manually)
    如果选择默认的(default),一直回车执行下去就可以了
    选择手动的(Manually)回车:
    按键盘上的上下键,选择手动的(Manually)
    在这里插入图片描述

    选项配置看个人项目的需求
    	空格键是选中与取消,A键是全选
    	TypeScript 支持使用 TypeScript 书写源码
    	Progressive Web App (PWA) Support PWA 支持。
    	Router 支持 vue-router 。
    	Vuex 支持 vuex 。
    	CSS Pre-processors 支持 CSS 预处理器。
    	Linter / Formatter 支持代码风格检查和格式化。
    	Unit Testing 支持单元测试。
    	E2E Testing 支持 E2E 测试。
    

    根据项目我选择下面这样的
    在这里插入图片描述
    回车后,告诉router路由是使用history模式还是hash模式,这里我选择hash模式,所以我输入no
    在这里插入图片描述
    之后是css的预处理,我选择的是sass
    在这里插入图片描述
    这个是配置文件存放的地方,第一个是独立的文件夹位置,第二个是是在package.json文件里
    这里我选择第一个
    在这里插入图片描述
    回车后有个选择Y/N,这步是告诉你是否保存这次所选好的步骤,输入y就是保存,那么下次再创建项目时直接回=会有个选项,选择那个选项直接回车就可以,输入n就是不保存这次的选择步骤,在下次创建项目时,要自己重新选择配置
    这里我选择n,然后直接回车就安装成功啦

    在这里插入图片描述
    安装成功后,启动项目

    注意:启动项目时,一定要注意是否在项目目录中启动的

    •   	cd my-project //进入到项目目录
        	yarn serve  //启动项目
      

    在这里插入图片描述
    在浏览器访问localhost:8080即可
    在这里插入图片描述
    vue-cli3.0的目录比2.0简洁了很多,没了build和config等目录。若需要其他配置则需要自己手动配置了呢

    如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具
    npm install -g @vue/cli-init
    vue init webpack my-project

    展开全文
  • 一、介绍 vue-cli是一个可以快速搭建vue项目的脚手架,一般搭建一个项目大致可以分为:1、脚手架搭建,2、自己用webpack,gulp等...1. 确保你已经安装了node,接下来先全局安装vue-cli npm install -g vue-cli 2. ...

    一、介绍

    vue-cli是一个可以快速搭建vue项目的脚手架,一般搭建一个项目大致可以分为:1、脚手架搭建,2、自己用webpack,gulp等工具搭建。但是第二种需要自己对那些工具特别熟悉,那么怎么去熟悉呢,滚去看官方文档!!今天先来介绍第一种用脚手架搭建一个vue项目
    vue-cli2文档
    vue-cli3文档

    二、安装

    1. 确保你已经安装了node,接下来先全局安装vue-cli

    vue-cli2:
    npm install -g vue-cli
    vue-cli3:
    npm install -g @vue/cli

    注:用vue cli3同样当vue-cli2的脚手架用,只要安装一个桥接工具 npm install -g @vue/cli-init

    2. 查看是否安装成功

    vue -V或者vue --version

    三、使用

    1. 开始搭建vue项目

    vue-cli2方法:vue init webpack <Project Name>

    vue-cli3方法:vue create <Project Name>

    然后一路回车,项目就搭好啦,接下来就不用我说了吧~

    四、脚手架代码分析

    1. https://github.com/lvan-zhang/vue-cli2-test
    2. https://github.com/lvan-zhang/vue-cli3-test
    展开全文
  • 1、执行npm install --global vue-cli ,全局安装vue-cli----因为默认是从国外服务器下,可以使用阿里巴巴在国内的镜像服务器。产生通过config命令设置默认下载路径:npm config set registry ...

    前提:nodeJs本地已安装。

    1、执行npm install --global vue-cli ,全局安装vue-cli

    ----因为默认是从国外服务器下,可以使用阿里巴巴在国内的镜像服务器。

    产生通过config命令设置默认下载路径:

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

    然后再执行:

    npm install --global vue-cli

    2、安装后,检查是否安装成功

    vue -V (在此注意V为大写)

    3、使用vue建一个项目名叫“my-project”(vue init webpack my-project),注意项目名不能有大写。

    ----注:vue-cli 的模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目,他的配置并不全放在根目录下的 webpack.config.js 中。

    ----webpack-simple 相对简单的,它根目录下才有个 webpack.config.js。

    4、注意:

    项目建立过程中,有如下选择,选择NO。(该选项为使用ESLint规范你的代码,一个空格错误都将报错,不开启,避免不必要的麻烦)。

    后两项为单元测试,可以选择No.

    5、项目建立完成后,目录结构如下:

    6、安装项目所需依赖,进入项目中:

    npm install

    完成后,会发现项目目录下多出一个node_modules文件夹,里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目。

    7、进入项目目录文件夹(my-project)中,就可以使用vue进行开发啦

    8、使用npm run dev,便可以打开本地服务器实时查看效果(localhost:8080)

    如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用,需要修改一下配置文件 config>index.js

    建议将端口号改为不常用的端口。另外我还将 build 的路径前缀修改为 ' ./ '(原本为 ' / '),是因为打包之后,外部引入 js 和 css 文件时,如果路径以 ' / ' 开头,在本地是无法找到对应文件的(服务器上没问题)。所以如果需要在本地打开打包后的文件,就得修改文件路径。

    9、初始效果

    10,退出监听,可以直接Ctrl+C,选择Y。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

    时间: 2017-05-14

    展开全文
  • 怎么指定安装 vue-cli3

    2019-12-30 14:02:27
    现在脚手架4已经出来了,如果我直接npm i @vue/cli -g,则默认安装的是4,我要装脚手架3,应该怎么装呀
  • [vue-cli]如何进入vue-cli图形化可视化管理(输入 vue ui 后没有响应的解决方案) 导读 如何进入Vue脚手架(vue-cli)图形化管理界面?...在全局安装 vue-cli 版本大于3.0的状态下,在终端中输入v...

    [vue-cli]如何进入vue-cli图形化可视化管理(输入 vue ui 后没有响应的解决方案)

    导读

    1. 如何进入Vue脚手架(vue-cli)图形化管理界面?
    2. 输入 vue ui 后没有响应怎么解决?
    3. 为什么使用 npm 重新安装 vue-cli 后,版本依然没有超过3.0?

    1.如何进入 vue-cli 图形化管理界面

    1. 在全局安装 vue-cli 版本大于3.0的状态下,在终端中输入vue ui命令即可启动vue脚手架提供的图形化项目管理界面

    在这里插入图片描述
    在这里插入图片描述

    • 不知道版本的盆友可以用 vue -V 命令来获取版本信息

    在这里插入图片描述

    2. 输入 vue ui 后终端没有响应怎么解决?

    1. 这种状况一般是vue脚手架版本低于3.0.0(上方有查询版本号的方式)
    2. 如果是版本号问题,请继续往下看。
    3. 如果不是的话,欢迎贴出来一起讨论。

    3. 为什么重新安装 vue-cli 后,版本依然没有超过3.0?

    npm i -g vue-cli

    1. 博主使用以上命令安装后,vue-cli的版本依然是 2.9.6

    2. 如果你遇见与博主相同的问题,请输入以下命令来完全卸载vue-cli

    npm uninstall -g vue-cli

    1. 使用以下命令重新安装vue-cli

    npm install -g @vue/cli

    1. 这时的vue-cli版本不再是3.0.0之前的版本了
    • 注 意 :博主的Mac就遇到了报错 -13 的问题,这时候终端需要超级权限,在命令之前加个sudo,回车输入密码就好
    1. 这时候再输入 vue ui 命令,就可以愉快地启动vue-cli图形化界面了!
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
    展开全文
  • vue-cli3+来袭,教你怎么安装Vue cli 3+

    千次阅读 2019-01-16 17:13:04
    Vue cli 3.0最新版发布了,增加了许多...Vue cli 3+的包名发生了变化,从vue-cli更改为了@vue/cli。如果你以前安装过低版本的Vue cli,你需要先用npm卸载vue-cli。否则安装Vue cli 3+会报错。 npm uninstall vue-...
  • 使用vue-cli脚手架新建了一个以webpack模版的项目,想在单组件的项目中使用postcss书写css。 1、安装 npm install postcss-cssnext postcss-import postcss-loader -S 2、如果已经安装postcss(npm install post...
  • vue-cli3.0使用及配置(部分)

    万次阅读 多人点赞 2018-06-19 22:18:28
    1.先全局安装vue-cli3.0 检测安装: vue -V 2.创建项目(这个就跟react创建脚手架项目比较像了) 这里如果你是第一次用3.0版本的话,是没有前两个的,而只有最后两个,这里是 让你选...
  • 怎么来搭建VUE-cli脚手架

    千次阅读 2019-10-23 19:36:48
    vue-cli脚手架搭建 ...1、 vue-cli 脚手架安装 环境 资源 测试 热启动 打包上线 webpack 主流 前端三大自动化工具 gulp grunt vue-cli 脚手架 安装 1)测试是否有node 环境 并且 node 版本&g...
  • 怎么理解脚手架vue-cli

    2018-11-14 17:39:25
    接触过一段时间前端的同学必然会接触到vue,然后就会接触到vue-cli,因为大多数人是通过npm install -g vue-cli,意思是安装全局的vue-cli,实际上vue-cli就是一个简单的demo,它会为你配置好一些最基本的东西,每次...
  • 怎么搭建vue-cli脚手架

    2019-09-26 14:33:54
    我们在使用vue搭建项目的时候,经常要使用到vue-cli。 一、安装node.js 去node官网下载并安装node,一直next就行。 等待安装完毕,输入node-v,如果输出版本号,那说明已经成功安装了。再输入命令行npm-v,输出...
  • 最近学到了vue-cli脚手架,在安装的时候,却发现怎么样都无法成功安装,按道理来讲三分钟就能够安装成功的,具体错误如下: 我问了几个大厂朋友:这里其实已经安装成功了,但是运行不了vue命令,会出现:zsh: ...
  • 安装Vue-Cli到Thinkphp中 1.1.1 检查是否安装node 终端输入npm的指令如果没有安装的话会提示未找到指令 正确的姿势如下图,说明已经安装了node依赖 1.1.2 安装node 到node的官网地址进行下载并安装步骤安装 node ...
  • 首先,安装vue-cli3。 npm install -g @vue/cli 安装好之后的项目是这样的,见下图: 相比较vue-cli2的项目,缺少了build和config目录,另外static目录也没了,多了个public目录。 配置文件需要自己写一个vue....
  • npm install -g@vue/cli 出现报错!怎么解决? ![图片说明](https://img-ask.csdn.net/upload/202004/21/1587453688_989097.png)
  • vue安装卸载各种坑(主要是vue-cli

    千次阅读 2020-08-17 12:57:42
    如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。 这是vue-cli 3.0版本的卸载 小编之前没注意 每次卸载 不知道怎么回事老是...
  • # 安装vue cli 4.x npm i -g @vue/cli # mac下可能要加sudo sudo npm i -g @vue/cli # --unsafe-perm 的作用请参考最后的附加内容 sudo npm i -g @vue/cli --unsafe-perm 安装成功后可以使用下面命令检测是否安装...
  • 安装vue-cli的步骤

    2018-07-31 17:22:29
    首先:  win+r 打开终端  输入cmd  1.安装node  注意:  node版本必须是10多的,最新的,否则有可能... 具体怎么样,还是试试吧!系统有时候不支持...  安装成功后终端输入  2.安装淘宝镜像:  npm:  n...
  • Vue-Cli 3.x脚手架怎么用 ...在安装vue-cli之前,先确保已经装了node.js(8.9版本或更高) 1.在终端安装全局vue-cli npm install -g @vue-cli 2.安装完成后检查是否成功,输入版本,看是否显示 vue --versi
  • vue-cli如何安装指定版本

    千次阅读 2020-02-29 23:31:46
    问:我目前是vue-cli v4的版本想降回v3, 怎么操作? 卸载重装即可。npm uninstall -g @vue/clinpm install -g @vue/cli@3.11.0
  • vue-cli快速构建Vue项目

    2017-03-22 16:07:13
    ue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js...安装vue-cli之前,需要先装好vue 和 webpack npm install -g vue //全局安装vue npm install -g webpack //全局安装webpack npm install -g vue-cli
  • 怎么构建vue-cli项目

    2019-04-26 10:50:00
    1.安装node.js(已安装可直接跳过,建议查看node版本,node -v); 2.npm包管理器,是集成在node中的,可跳过(npm -v); 3.由于npm的有些资源被墙,为了更快更稳定,...4.vue安装: npm install vue或者采用cnpm安...
  • 乘着有时间看了一下 vue-cli3.0.x 使用 。感觉还蛮不错的。 因为之前项目使用的 vue-cli 2 创建的,强行使用 eslint让我们很难受,一些与项目无关的 “build” 和 “config” ,让人看着就有一些不爽 。由于公司环境...
  • vue-cli 快速构建项目

    2017-08-15 11:37:07
    vue-cli快速构建Vue项目 vue-cli是什么? vue-cli 是vue.js的脚手架,用于...安装vue-cli之前,需要先装好vue 和 webpack npm install -g vue //全局安装vue npm install -g webpack //全局安装webpack npm i
  • webpack+vue-cli

    2019-03-18 21:31:12
    尝试了自己安装vue-cli和webpack的demo。 我的理解是: (1)使用原因:对于大型的项目开发,使用vue-cli是会比较便捷的(我也不知道为什么,反正也没大型的经验,但是大家都这样说。。。) (2)与vue-cli打包...
  • vue-cli3怎么将less文件设置成全局样式 看了网上搜的,各不一样,亲自测试了下,有效果,记下来 安装 style-resources-loader 和 vue-cli-plugin-style-resources-loader npm i style-resources-loader vue-cli-...
  • 最近用vue-cli脚手架很顺口,特别是UI控制台,在这里,创建项目和搭建本地环境,...于是重新安装vue-cli最新版(版本号必须3x以上)就行了,使用好慢的镜像,npm来安装 npm i -g @vue/cli 安装完后,再查看vue的命令列
  • # 全局安装 vue-cli脚手架 npm install -g @vue/cli 等待安装完成后开始下一步 1.2 初始化项目 vue create vue-cli3-project (1)选择一个预设 可以选择默认预设,默认预设包含了 babel , eslint 我们选择更多功能 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 404
精华内容 161
关键字:

怎么安装vue-cli

vue 订阅