Vue-cli脚手架起步
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脚手架起步的更多相关文章
- 13. Vue CLI脚手架
一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...
- 使用Vue CLI脚手架搭建vue项目
本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...
- vue.cli脚手架初次使用图文教程
vue-cli作用 vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程. vue-cli使用 !!前提:需要vue和webpack 安装全局vue-cli npm ...
- vue cli脚手架使用
1.安装nodejs,npm https://www.cnblogs.com/xidianzxm/p/12036880.html 2.安装vue cli sudo npm install -g @vu ...
- node.js和vue cli脚手架下载安装配置方法
一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en/ 2.安装node.js 下载完成后,双击安装包开始安装.安装地址最好换成自己指定的地 ...
- vue cli 脚手架上多页面开发 支持webpack2.x
A yuri demo for webpack2 vue multiple page.我看到有一些项目多页面项目是基于webapck1.0的,我这个是在webpack2.x上布置修改. 项目地址: ...
- 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)
1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...
- vue.js---利用vue cli脚手架工具+webpack创建项目遇到的坑
1.Eslint js代码规范报错 WARNING Compiled with 2 warnings 10:43:26 ✘ http://eslint.org/docs/rules/quotes St ...
- vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。
废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子 项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.e ...
- 关于Vue.cli 脚手架环境中引入Bootstrap时,table表格样式缺失的解决办法
Vue+bootstrap不能正常使用table的样式 环境:下载官网的本地bootstrap包,然后在vue 的index.html引入bootstrap的css和js环境 问题描述:1. vue里 ...
随机推荐
- 使用Laravel首次运行出现 No application encryption key has been specified.
先观察Laravel根目录下是否有 .env文件,有则看1,无则看2 1.若直接报500错误: 输入命令: php artisan key:generate 2.若文件根目录下没有 .env文件 (1 ...
- java web 开发快速宝典 ------电子书
http://www.educity.cn/jiaocheng/j10259.html 1.2.1 JDk 简介 JDK是Sun公司在1995年推出的一套可以跨操作系统平台编译和运行Java程序的开 ...
- linux性能分析之平均负载
平均负载 1,执行 top 或者 uptime 命令 来了解系统负载 uptime 分析显示 当前时间,系统运行时间,正在登录用户数 平均负载是指单位时间内,系统处于可运行状态和不可中断状态的平均进程 ...
- 什么叫DMZ区?DMZ区有什么作用?应该怎样构建DMZ
您的公司有一堆电脑,但可以归为两大类:客户机.服务器.所谓客户机就是主动发起连接请求的机器,所谓服务器就是被动响应提供某些服务的机器.服务器又可以分仅供企业内网使用和为外网提供服务两种. 所以,如果把 ...
- awk中begin/end的含义
BEGIN中的内容是在awk开始扫描输入之前执行,一般用来初始化或设置全局变量: 而END之后的操作将在扫描完全部的输入之后执行.
- java初级之数组详解
一,数组的概念: 数组是为了存储同一种数据多个元素的集合,也可以看成是一个容器,数组既可以存储基本数据类型,也可以存储引用数据类型,数组是为了存储同种数据类型的多个值. 1.1.1,一维数组重点: 数 ...
- JS原生上传大文件显示进度条-php上传文件
JS原生上传大文件显示进度条-php上传文件 在php.ini修改需要的大小: upload_max_filesize = 8M post_max_size = 10M memory_li ...
- 【JVM学习笔记】打破双亲委托机制的例子
Tomcat也有自己的类加载器,比如Servlet,这些类加载器就改变了双亲委托模型的默认机制 (该主题有待深入)
- C#在非UI线程调用UI线程的控件
首先需要定义一个委托(delegate): private delegate void delegateSetProcessBarVal(int value); 然后定义一个方法来执行具体的操作: p ...
- eclipse下写html
3.创建静态web工程 打开eclipse,选择file,new project 或者 new other...,选择web项中的static web project ,next. 输入你的项目名,如 ...