前端vue-cli安装

Silent1376      2022-02-13     773

关键词:

首先需要Node.js环境支持:

Node.js官网下载:

https://nodejs.org/en/

右边稳定版,左边最新版

下载安装程序之后双击运行,无脑下一步

 

打开终端输入版本查看命令:

node -v

nodejs有npm,类似linux的rpm包管理器的东西

同理这个也有版本

npm -v

 

不推荐使用npm获取vue-cli程序,通过npm下载淘宝镜像cnpm来获取

# -g 全局安装
npm -install cnpm -g

 

全局所安装的位置是位于这里:

C:\Users\User-Dai\AppData\Roaming\npm\node_modules

vue-cli是先前已经装好了的。。。

 

由CNPM来安装Vue-Cli程序

cnpm install vue-cli -g

 

可以查看用于创建Vue程序的模版:

vue list

 

创建Vue-Cli程序模版

选定一个工程目录,然后进入目录输入此命令创建

vue init webpack vue-project

 

然后对这些配置自行选择:

 

这个错误无法让Vue-Cli运行

解决办法:

https://www.cnblogs.com/muxi0407/p/11833317.html

就是在Vue-Cli模版目录中安装一个npm或者cnpm

npm install
或者 cnpm install

尽管有一些已过时的提醒,但是没有报错

 

然后运行Vue-Cli程序执行正常:

npm run dev

点击地址访问:

http://localhost:8080/#/

访问成功:

 

tzxblog博客系统-vue前端项目搭建和要点记录

vue-cli2和vue-cli3(vue-cli4)的一些区别据我目前的了解,创建vue项目,vue-cli不是必须的,但是在实际开发时,几乎就是必须的。vue-cli既可以看做是一种创建vue项目的快捷工具,也可能理解成是vue的一种规范。由于本机的vue-cli安装... 查看详情

vue-cli新手总结

项目中需要用到vue-cli脚手架来搭建前端框架,对于vue小白,总结一下自己遇到的问题以及解决方案,还要学习的地方有很多。vue-cli安装下载网上有很多教程,推荐看https://www.jianshu.com/p/5ba253651c3b,有很详细的项目搭建,但对于... 查看详情

vue开发:前端项目模板

...、vue-router、axios、element-ui项目模板下载地址创建项目Java+前端项目合集使用vue-cli创建项目,功能选择:Babel、Router、vuex、Linter/Formatter、使用配置文件(文章转载自乐字节)插件选择vue-cli-plugin-element安装运行依赖axios使用命令安... 查看详情

vue脚手架(vue-cli)安装总结

...可用于快速搭建大型单页应用(SPA)。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:1#全局安 查看详情

vue-cli初始----安装运行vue项目(代码片段)

...vuecli创建项目3、创建一个vue项目4、项目创建成功5、运行前端项目安装Node.js环境1、官网下载去node.js官网下载版本到本地,我下载到E:\\node.js\\,下载完之后会有这么多文件2、配置环境 查看详情

vue-cli初始----安装运行vue项目(代码片段)

...vuecli创建项目3、创建一个vue项目4、项目创建成功5、运行前端项目安装Node.js环境1、官网下载去node.js官网下载版本到本地,我下载到E:\\node.js\\,下载完之后会有这么多文件2、配置环境 查看详情

新手入门vue使用vue-cli创建项目

...过vue和npm,连运行环境和项目构建的都不会的小白,对于前端老司机的就不用看了,浪费时间。使用npm与vue-cli构建vue项目 第一步:安装运行环境(node与npm)nodeJ官网:http://nodejs.cn/ 下载安装包(安装)安装完成后,需要检... 查看详情

macosx下安装vue脚手架(vue-cli)(代码片段)

前言Vue作为前端三大框架(Angular,React,Vue)之一,号称是最简单,最容易上手的框架,同时也是行内的大趋势,还可以用来开发最火的小程序。具有开发快,双向数据流等特点,有些人认为Vue是Angular和React的结合,既有Angular... 查看详情

vue-cli3搭建的前端项目基础模板

基于vue-cli3搭建的前端模板,fork或clone本仓库,即可搭建完成一个新项目的基础模板,源码地址,欢迎star或fork特性CSS预编译语言:lessAjax:axios,做了一定的封装,详见src/services/request.jsSVG雪碧图:采用webpack插件svg-sprite-loader,及svg... 查看详情

前端工程化vue-cli

六前端工程化vue-cliVue是渐近式框架,你可以用它一个功能,也可以用全家桶。前面的章节中,我们是在html中引入vue.js,只用它核心的数据绑定功能。但基于vue的扩展还有很多,比如vueRouter,axios,elementUI等。vue-cli,它是一个专... 查看详情

前端面试题vue-cli目录汇总

【Vue-cli】[vue-cli]vue-cli3你有使用过吗?它和2.x版本有什么区别?[vue-cli]vue-cli默认是单页面的,那要弄成多页面该怎么办呢[vue-cli]不用vue-cli,你自己有搭建过vue的开发环境吗?流程是什么?[vue-cli]怎么使用v... 查看详情

安装vue-cli遇到pleasetryrunningthiscommandagainasroot/administrator的解决方案

最近在搭前端环境,装完node.js之后,准备安装vue工程的初始化工具时(npminstall-gvue-cli),遇到这个坑: 大体的意思就是权限问题,导致/usr/local/lib/node_modules权限不够,init失败 解决路径:1、新开一个终端2、输入以下命... 查看详情

vue-cli脚手架快速搭建项目指南(代码片段)

...0c;方便创建vue工程、配置第三方依赖、编译vue工程1.webpack前端项目工程化的标志之一就是引入了『编译』环节,而webpack就是最常见、最常用的前端项目编译工具。如果作类比的话,那么npm+webpack≈maven2、脚手架介绍a、... 查看详情

前端项目的创建和准备(代码片段)

...关代码 首先要安装vue-cli     npminstall@vue/cli-g创建前端项目(我这里的项目名就叫vision)        vuecreatevision 在创建过程中配置一下  npmrunserve将项目跑起来,在浏览器地址栏中输入http://localhost:8080/即可访... 查看详情

卸载vue-cli2,安装vue-cli3

     查看详情

vue.js

  现在的前端,越来越多的公司开始使用VUE,有的说是兼容性好,有的说是很小巧。我觉得可能也是前端不满足现状,开发了新的组件来优化前端的工作。  安装vue-cli需要安装node.js然后安装npm再安装vuenpminstallnpm-g//安装npmnp... 查看详情

vue-cli安装步骤

vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node条件: node在4.以上,npm在3以上安装指令:1、npminstall-gvue-cli在全局下安装vue-cli #安装vue-clinpminstall-gvue-cli#初始化webpack项目vueinitwebpackmy-projectcdmy-project#np... 查看详情

前端vue框架应用雏形

...全局安装vue-cli脚手架:cnpminstall-g@vue/cli  安装element-ui前端组件库:cnpmielement-ui-S  安装路由:cnpminstallvue-router  安装请求库:cnpminstallaxios-S三、编写脚本:       查看详情