Vue-cli4脚手架搭建
一:要安装Node.js:安装路径要默认安装(node-v12.16.2-x64.msi-长支持
二:要安装cnpm
1)说明:npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等);
2)使用npm安装插件:命令提示符执行npm install <name>
3)选装cnpm因为npm安装插件时从国外服务器下载,受网络影响大,可能出现异常,如果npm服务器在中国就好了,所以淘宝团队干了这事。来自官网“这是一个完整的npmjs.org镜像,你可以用此代替官方van本(只读),同步频率目前为10分钟一次以保证尽量与官方服务同步。”
安装:npm install -g cnpm --registry=https://registry.npm.taobao.org
输入 cnpm -v,可以查看当前cnpm版本
yam是个包管理器,是facebook发布的一款取代npm的包管理工具安装yam
npm install -g yam
三:安装vue-cli脚手架构建工具
vue-cli 提供一个官方命令行工具,可用与快速搭建代行单页应用
1、先确认是否有安装过vue-cli
vue -V //如果有的话,就用下面的命令卸载
npm uinstall vue-cli -g (如图一所示)

2、安装vue-cli脚手架输入命令:cnpm install -g @vue/cli(如图二)

3、查看vue版本 :vue -V(如图三)

指定版本安装vue3.0以下:npm install -g vue-cli@版本号
vue3.0或vue3.0以上:npm install -g @vue/cli@版本号
四、创建项目
1输入如下命令:vue create vue-demo

default(babel,eslint)默认
Manually select features 手动选择

空格选择对应的插件




在cmd窗体中输入 cd vue-demo

在cmd窗体中在输入yarn serve

到这里也就完整的把vue-cli4脚手架搭建好了,打开ie浏览器输入http://localhost:8080(如下图)

Vue-cli4脚手架搭建的更多相关文章
- 使用Vue CLI脚手架搭建vue项目
本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...
- 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)
1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...
- vue+webpack4 脚手架搭建
1, vue 中 h => h(App) 的含义: //render: h => h(App) 是下面内容的缩写: render: function (createElement) { r ...
- 13. Vue CLI脚手架
一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...
- 让vue-cli脚手架搭建的项目可以处理vue文件中postcss语法
图中&属于postcss的语法,这样书写样式可以清楚的看出选择器之前的层级关系,非常好用. 在利用vue-cli脚手架搭建的项目中如果不配置是不支持这种写法的,这样写不会报错,但是样式不生效. ...
- 用vue-cli脚手架搭建一个仿网易云音乐的全家桶vue项目
一,vue-cli环境搭建 1,全局安装webpack npm install webpack -g 2,安装vue脚手架 npm install vue-cli -g 3,新建一个新的project ...
- vue脚手架搭建流程
搭建vue项目之前你需要安装vue的脚手架和node.js,一起去看看怎么搭建一个vue环境吧.(学编程语言最爱看见的就是用这个先写一个helloworld,只想说我对世界友好可是现实是残酷的.... ...
- 从0开始搭建vue+webpack脚手架(三)
在从0开始搭建vue+webpack脚手架(二)中已经基本完成了开发环境的配置.当开发完成后,我们需要将完成的项目进行打包,接下来对打包做一些优化: 运行 $ npm run build 可生成dis ...
- 从0开始搭建vue+webpack脚手架(二)
接着从0开始搭建vue+webpack脚手架(一) 三.配置webpack-dev-server 1. webpack-dev-server自带一个node的服务器, 项目在服务端运行的同时可以实现热 ...
- 脚手架搭建vue框架
一. node安装 1)如果不确定自己是否安装了node,可以在命令行工具内执行: node -v (检查一下 版本): 2)如果 执行结果显示: xx 不是内部命令,说明你还没有安装node , ...
随机推荐
- 1+X Web前端开发(中级)理论考试样题(附答案)
传送门 教育部:职业教育将启动"1+X"证书制度改革 职业教育改革1+X证书制度试点启动 1+X成绩/证书查询入口 一.单选题(每小题2分,共30小题,共 60 分) 1.在Boo ...
- XXE验证与利用流程
特征 特征1 --- .ashx 看到url是 .ashx后缀的 特征2 --- 响应体是xml 发现有这些特征都可以用下面的流程测试 测试 在线工具: http://ceye.io/ http:// ...
- Prthon多线程和模块
Prthon多线程和模块 案例1:简化除法判断 案例2:分析apache访问日志 案例3:扫描存活主机 案例4:利用多线程实现ssh并发访问 1 案例1:简化除法判断 1.1 问题 编写mydiv.p ...
- postman 参数传递
pm.test("Status code is 200", function () { pm.response.to.have.status(200); }); pm.test(& ...
- [ddt02篇]十年测试老鸟帮您解析:ddt结合txt,excel,csv,mysql实现自动化测试数据驱动
一.前言: 阅读此文之前请先阅读: [ddt01篇]十年测试老鸟帮您解析:ddt数据驱动入门基础应用:https://www.cnblogs.com/csmashang/p/12679448.html ...
- MySQL学习之路5-数据表的常用操作
排序 :order by desc select * from <tablename> order by <字段名> desc:order by默认升序 desc 降序 分组 ...
- Array(数组)对象-->unshift() 方法
1.定义和用法 unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度. 语法: array.unshift(item1,item2, ..., itemX) 参数:item1,it ...
- app扫描二维码登陆
先说明一下实现原理: 如同微信扫描登陆一样,就是一种pc的自动登陆授权.在网站首页得有切换登陆的选项:密码登陆 扫码登陆 当用户切换到扫码登陆时,向服务器请求一次获得一个唯一的uukey 利用这个uu ...
- HBase Shell 十大花式玩儿法
前言:工欲善其事必先利其器,今天给大家介绍一下HBase Shell十大花式利器,在日常运维工作中,可以试着用起来. 1. 交互模式 也就是我们最常用到的Shell命令行的方式. $ hbase sh ...
- ffmpeg使用ss与t参数对视频进行剪辑
ffmpeg能够实现对视频进行剪辑操作,ss为指定视频剪切开头的起始时间,t制定视频的总长度,ss与t的单位均为:秒. ffmpeg -ss 7200 -i 1080p.mp4 -c copy -t ...