一:要安装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脚手架搭建的更多相关文章

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

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

  2. 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)

    1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...

  3. vue+webpack4 脚手架搭建

    1, vue 中 h => h(App) 的含义: //render: h => h(App) 是下面内容的缩写: render: function (createElement) { r ...

  4. 13. Vue CLI脚手架

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

  5. 让vue-cli脚手架搭建的项目可以处理vue文件中postcss语法

    图中&属于postcss的语法,这样书写样式可以清楚的看出选择器之前的层级关系,非常好用. 在利用vue-cli脚手架搭建的项目中如果不配置是不支持这种写法的,这样写不会报错,但是样式不生效. ...

  6. 用vue-cli脚手架搭建一个仿网易云音乐的全家桶vue项目

    一,vue-cli环境搭建 1,全局安装webpack npm install webpack -g 2,安装vue脚手架 npm install vue-cli -g 3,新建一个新的project ...

  7. vue脚手架搭建流程

    搭建vue项目之前你需要安装vue的脚手架和node.js,一起去看看怎么搭建一个vue环境吧.(学编程语言最爱看见的就是用这个先写一个helloworld,只想说我对世界友好可是现实是残酷的.... ...

  8. 从0开始搭建vue+webpack脚手架(三)

    在从0开始搭建vue+webpack脚手架(二)中已经基本完成了开发环境的配置.当开发完成后,我们需要将完成的项目进行打包,接下来对打包做一些优化: 运行 $ npm run build 可生成dis ...

  9. 从0开始搭建vue+webpack脚手架(二)

    接着从0开始搭建vue+webpack脚手架(一) 三.配置webpack-dev-server 1. webpack-dev-server自带一个node的服务器, 项目在服务端运行的同时可以实现热 ...

  10. 脚手架搭建vue框架

    一. node安装 1)如果不确定自己是否安装了node,可以在命令行工具内执行: node -v  (检查一下 版本): 2)如果 执行结果显示: xx 不是内部命令,说明你还没有安装node , ...

随机推荐

  1. scikit_learn分类器详解

    1       分类 分类是将事物按特性进行分类,例如将手写数字图片分类为对应的数字. 1.1  MINIST数字图片集分类 MINST就是一个70000张规格较小的手写数字图片,如何将他们分类为对应 ...

  2. 记一次Windb死锁排查

    正在开会,突然线上站点线程数破千.然后一群人现场dump分析. 先看一眼线程运行状态 !eeversion 发现CPU占用并不高,19%,937条线程正在运行. 看看他们都在干什么. ~* e !cl ...

  3. raphael.js 使用指南

    RaphaelJS是一个用JavaScript实现的强大的矢量图形库. (1)使用前准备,下载RaphaelJS,到官网下载. (2)在相应的HTML页面引入RaphaelJS,如下示例代码: < ...

  4. PTA数据结构与算法题目集(中文) 7-36 社交网络图中结点的“重要性”计算 (30 分)

    PTA数据结构与算法题目集(中文)  7-36 社交网络图中结点的“重要性”计算 (30 分) 7-36 社交网络图中结点的“重要性”计算 (30 分)   在社交网络中,个人或单位(结点)之间通过某 ...

  5. .NET Core项目部署到Linux(Centos7)(四)VMware Workstation虚拟机Centos 7安装

    目录 1.前言 2.环境和软件的准备 3.创建.NET Core API项目 4.VMware Workstation虚拟机及Centos 7安装 5.Centos 7安装.NET Core环境 6. ...

  6. .net 垃圾回收

    垃圾回收器帮我们处理了内存中不在使用的对象,提高了机器的性能,让开发人员轻松了很多. 你真的了解垃圾回收吗? 或许你知道垃圾回收,听说过是通过标记回收,可是怎么标记回收呢就不是很清楚了,好吧,如果不清 ...

  7. Web前端必备-Nginx知识汇总

    一.Nginx简介 Nginx是一个高性能.轻量级的Web和反向代理服务器, 其特点是占有内存及资源少.抗并发能力强. Nginx安装简单.配置简洁.启动快速便捷.支持热部署.支持 SSL.拥有高度模 ...

  8. 史上最详细mac安装Qt教程

    史上最详细mac安装Qt教程,小白看过来! 这是一篇非常适合Qt入门小白的的安装Qt教程,因为这学期我们小组的一个关于高速救援的项目要用到Qt与web进行交互式展现相关的图像,由于没有MSVC这个插件 ...

  9. Struts2-学习笔记系列(5)-配置action

    配置包命名空间 实现了action就需要在struts中配置action.首先配置包属性: 需要注意的是:在框架进行包匹配的时候,按文档的从上到下的顺序进行匹配   <!--下面配置名为book ...

  10. bootstrapTable随机改变列颜色

    { title: '运单编号', field: 'waybillNumber', align: 'center', valign: 'middle', cellStyle: function (val ...