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. Python做域用户验证登录

    安装包 ldap3 代码: from ldap3 import Server, Connection, ALL, NTLM # 连接 server = Server('public.ad.com', ...

  2. 代码实现将键盘录入的数据拷贝到当前项目下的text.txt文件中,键盘录入数据当遇到quit时就退出

    package com.looaderman.test; import java.io.FileNotFoundException; import java.io.FileOutputStream; ...

  3. WPF Visifire 图表控件

    Visifire WPF 图表控件 破解 可能用WPF生成过图表的开发人员都知道,WPF虽然本身的绘图能力强大,但如果每种图表都自己去实现一次的话可能工作量就大了, 尤其是在开发时间比较紧的情况下.这 ...

  4. Maven-SSM框架整合

    1.创建Maven项目 配置pom.xml依赖 <!-- 允许创建jsp页面 --> <dependency> <groupId>javax.servlet< ...

  5. JAVA记事本的图形用户界面应用程序含加密

    JAVA记事本的图形用户界面应用程序 加密 题目简介: 整体分析: 实验代码: import java.awt.EventQueue; import java.awt.event.ActionEven ...

  6. DEDECMS 漏洞汇总

    日期:2019-08-08 10:20:28 更新: 作者:Bay0net 介绍: 0x01.组合拳拿 shell 漏洞版本:v5.5 - v5.7 前台任意用户密码重置 首先注册一个账户,账户名为 ...

  7. python-https状态码

    HTTP状态码状态码的职责是当客户端向服务器发送请求时,描述返回的请求结果.借助状态码,用户可以知道服务器端是正常处理了请求,还是出现了错误. 状态码的类别 >>>状态码 类别 说明 ...

  8. centos下kill、killall、pkill命令区别

    kill是用来终止进程的 首先可以通过ps aux查看系统有哪些进程正在运行. 1.用kill来杀死某一个进程 #kill,加选项-9,加PID,表示杀死进程编号为PID的这个进程# -1 重启#ki ...

  9. PJzhang:如何在裸奔的年代找到一些遮羞布

    猫宁!!! 很久以前的一篇,搬过来. 我一直在“裸奔”,而且很久了,只是不太愿意承认. 想起了“皇帝的新装”,好奇何种经历和灵感让安徒生写出了如此精彩的故事. 一次百度了一个商品,不久接到了大规模电话 ...

  10. 深入理解java:4.3.1. 框架编程之MyBatis---SQL语句执行的完整流程

    Mybatis的整个的执行流程.如下图所示: 原理详解: MyBatis应用程序根据XML配置文件创建SqlSessionFactory, SqlSessionFactory在根据配置,配置来源于两个 ...