1.安装node.js

下载地址:http://nodejs.cn/download/

测试是否安装成功

node -V  检测安装包
npm -v 检测npm

2、安装webpack

npm install -g webpack
npm install webpack-cli -g

从webpack 4.X开始,需要全局安装webpack-cli

测试是否安装成功

webpack --version  || -v

3、全局安装vue-cli,在cmd中输入命令

npm install --global vue-cli
npm install -g @vue/cli // 3.0 || npm install --global @vue/cli

检测是否安装成功

//  注意这里是大写V 
vue -V

打开C:\Users\Andminster\AppData\Roaming\npm目录下可以看到    APPData是隐藏文件,打开 打开node_modules也可以看到  就能看到cli

4、用vue-cli来构建项目

vue init webpack demo   // 2.0
vue create demo     // 3.0

5、安装依赖

npm install

6、启动项目

npm run dev        //    2.0
npm run serve    // 3.0

ok!

网速不好的可以暗转淘宝镜像

npm淘宝镜像安装命令

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

喜欢的小伙伴可以关注我公众号“前端为大叔”

Vue-cli脚手架起步的更多相关文章

  1. 13. Vue CLI脚手架

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

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

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

  3. vue.cli脚手架初次使用图文教程

    vue-cli作用 vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程. vue-cli使用 !!前提:需要vue和webpack 安装全局vue-cli npm ...

  4. vue cli脚手架使用

    1.安装nodejs,npm https://www.cnblogs.com/xidianzxm/p/12036880.html 2.安装vue cli sudo npm install -g @vu ...

  5. node.js和vue cli脚手架下载安装配置方法

    一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en/ 2.安装node.js 下载完成后,双击安装包开始安装.安装地址最好换成自己指定的地 ...

  6. vue cli 脚手架上多页面开发 支持webpack2.x

    A yuri demo for webpack2 vue multiple page.我看到有一些项目多页面项目是基于webapck1.0的,我这个是在webpack2.x上布置修改.  项目地址:  ...

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

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

  8. vue.js---利用vue cli脚手架工具+webpack创建项目遇到的坑

    1.Eslint js代码规范报错 WARNING Compiled with 2 warnings 10:43:26 ✘ http://eslint.org/docs/rules/quotes St ...

  9. vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。

    废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子 项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.e ...

  10. 关于Vue.cli 脚手架环境中引入Bootstrap时,table表格样式缺失的解决办法

    Vue+bootstrap不能正常使用table的样式 环境:下载官网的本地bootstrap包,然后在vue 的index.html引入bootstrap的css和js环境 问题描述:1. vue里 ...

随机推荐

  1. koa 项目实战(三)创建测试接口和用户模型

    1.创建测试接口,并引入用户模型 根目录/routes/api/users.js const Router = require('koa-router'); const router = new Ro ...

  2. char能不能存储一个汉字

    答案是肯定的 请参见博客:https://www.cnblogs.com/1017hlbyr/p/6419016.html

  3. Android jni/ndk编程二:jni数据类型转换(primitive,String,array)

    一.数据类型映射概述 从我们开始jni编程起,就不可能避开函数的参数与返回值的问题.java语言的数据类型和c/c++有很多不同的地方,所以我们必须考虑当在java层调用c/c++函数时,怎么正确的把 ...

  4. RGB颜色透明度转换

    100% — FF95% — F290% — E685% — D980% — CC75% — BF70% — B365% — A660% — 9955% — 8C50% — 8045% — 7340% ...

  5. 接入上一篇SSM框架整合示例

    需要创建相应的包与文件夹 Book数据表作为本示例数据 搭建项目开始 首先有bean后 private int id; private String name; private int cnt; 第一 ...

  6. 关于springmvc的包含list提交的格式

    <%-- Created by IntelliJ IDEA. User: jh Date: 2017/7/12 Time: 14:31 To change this template use F ...

  7. python 学习笔记(三)根据字典中值的大小对字典中的项排序

    字典的元素是成键值对出现的,直接对字典使用sorted() 排序,它是根据字典的键的ASCII编码顺序进行排序,要想让字典根据值的大小来排序,可以有两种方法来实现: 一.利用zip函数将字典数据转化为 ...

  8. Windows下查找文件或文件夹被哪个进程占用

    Linux下我们可以使用lsof +D /filepath/,查看到文件被那些进程占用. windows下也会经常遇到文件夹或文件无法删除或无法访问的问题,使用“资源监视器”可以找到占用的进程,可以尝 ...

  9. Eclipse常用快捷方式

    Suggestions (Ctrl+1) 建议,比如创建局部变量 File Search (Ctrl+H) 在所有文件中查找关键字 Open Resource (Ctrl+Shift+R) 打开资源 ...

  10. java:面向对象(多态,final,抽象方法,(简单工厂模式即静态方法模式),接口)

    * 生活中的多态:同一种物质,因环境不同而表现不同的形态. * 程序中多态:同一个"接口",因不同的实现而执行不同的操作. * 多态和方法的重写经常结合使用,子类重写父类的方法,将 ...