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 ...
- Volley源码分析
取消请求的源码分析: public void cancelAll(RequestFilter filter) { synchronized (mCurrentRequests) { for (Requ ...
- 堆的ptmalloc机制
ptmalloc下堆的分配和回收 ptmalloc内存分配 1) 获取分配区的锁,为了防止多个线程同时访问同一个分配区,在进行分配之前需要取得分配区域的锁.线程先查看线程私有实例中是否已经存在一个分配 ...
- Cinder AZ 与 Nova AZ 的同步问题
问题 今天处理了一个 Boot from volume 失败的问题,错误日志给出了明确的原因:The instance and volume are not in the same AZ. Build ...
- spring mvc路径匹配原则
Ant path 匹配原则 在Spring MVC中经常要用到拦截器,在配置需要要拦截的路径时经常用到<mvc:mapping/>子标签,其有一个path属性,它就是用来指定需要拦截的路径 ...
- Hadoop完全分布式安装配置完整过程
一. 硬件.软件准备 1. 硬件设备 为了方便学习Hadoop,我采用了云服务器来配置Hadoop集群.集群使用三个节点,一个阿里云节点.一个腾讯云节点.一个华为云节点,其中阿里云和腾讯云都是通过使用 ...
- Python 爬虫的工具列表
Python 爬虫的工具列表 这个列表包含与网页抓取和数据处理的Python库 网络 通用 urllib -网络库(stdlib). requests -网络库. grab – 网络库(基于pycur ...
- python识别图片中的信息
好好学习的第一步 一心一意的干好一件事儿,问自己 我做什么 我怎么做 做的结果是啥 例子1 问题 回答 我做什么: 识别图片上的信息 我怎么做: 百度+谷歌 结果是啥: 完成识别 1 安装PIL pi ...
- redis外网无法连接问题
1.外网无法连接redis 解决方法: 把redis.conf里的bind 127.0.0.1注释掉,不行的话把127.0.0.1修改成0.0.0.0 2.make的时候显示没有gcc 解决方法: 安 ...
- MybatisPlus使用代码篇
package spring.server.consumer; import com.baomidou.mybatisplus.annotation.DbType; import com.baomid ...