vue-cli脚手架快速搭建项目
前言
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。
准备工作
在搭建一个vue项目之前,需要先安装好node.js和cnpm。
虽然npm也是可以使用的,但是npm安装会比较慢,进而导致网络问题安装失败,所以推荐使用cnpm进行安装;(附上cnpm全局安装代码)
npm install cnpm -g --registry=https://registry.npm.taobao.org
这里还需要提一句,node版本需更新在6以上,否则安装过程会报错。
开始搭建
1)全局安装vue-cli;命令行执行cnpm install -g vue-cli;出现以下安装进程说明项目安装正常,可以正式创建项目了。

2)vue-cli安装成功后,cd进入存放项目的文件夹下,如果是直接在预先准备好的文件夹下创建的,就可以省去cd这一步;然后执行vue init webpack,就会出现一些项目相关的信息需要选择配置,按需填写即可;

信息配置完以后,文件夹下会生成文件目录,见下图:

3)执行npm install,安装依赖;

4)安装依赖成功,执行npm run dev启动项目;


启动成功,浏览器打开localhost:8082就可以打开项目啦~

到这一个简单的vue项目就搭建好了,可以根据自己的需求去构建页面和内容啦。
最后的话
总的来说,使用vue-cli搭建一个vue项目还是比较简单的,但是搭建的过程中,可能会遇见各种问题,所以看见报错不要慌,定位问题再去解决他就可以了。
vue-cli脚手架快速搭建项目的更多相关文章
- vue cli3.0快速搭建项目详解(强烈推荐)
这篇文章主要介绍下vue-cli3.0项目搭建,项目结构和配置等整理一下,分享给大家. 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cl ...
- httprunner(3)用脚手架快速搭建项目
前言 如何快速搭建一个httprunner项目呢?我们可以使用脚手架,脚手架就是自动地创建一些目录,形成一个项目的架构,不需要我们再手动的去创建 查看创建新项目的命令 先来查看一下帮助命令 httpr ...
- vue cli4.0 快速搭建项目详解
搭建项目之前,请确认好你自己已经安装过node, npm, vue cli.没安装的可以参考下面的链接安装. 如何安装node? 安装好node默认已经安装好npm了,所以不用单独安装了. 如何安装v ...
- 使用angular-cli脚手架快速搭建项目
第一步 安装全局的angular-cli, npm install -g @angular/cli 或者 cnpm install -g @angular/cli@v1.0.0-rc.2 – 国内淘宝 ...
- 让我们用Vue cli全家桶搭建项目
一般项目都会用到这几个,这里不在详细介绍概念,只是简单的使用.一.搭建cli 1.事先安装好cnpm(淘宝镜像) npm install -g cnpm --registry=https://regi ...
- 使用Vue CLI 3快速创建项目
首先 vue create ant-design-vue-pro 执行命令会显示两个选项,1默认,2自定义 我么选择自定义 选择好自定义的插件回车就等待下安装成功然后进入项目文件夹 cd ant-de ...
- 脚手架快速搭建springMVC框架项目
apid-framework脚手架快速搭建springMVC框架项目 rapid-framework介绍: 一个类似ruby on rails的java web快速开发脚手架,本着不重复发明轮 ...
- 13. Vue CLI脚手架
一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...
- 基于Vue-cli 快速搭建项目
Vue-cli可以快速帮助我们创建一个项目,这是官方给我们提供的脚手架.下面我说一下vue-cli的使用方法. 一.准备工作 在使用vue-cli时,首先需要安装nodejs,npm,其次需全局安装v ...
随机推荐
- kylin相关问题
1.Kylin踩坑笔记 - 启动Kylin出现Could not find or load main class org.apache.hadoop.hbase.util.GetJavaPropert ...
- 【KeepAlive】Http--Keep-Alive及Tcp--Keepalive
Keep-Alive模式: Http协议采用“请求-应答”模式,当使用普通模式,即非Keep-Alive模式时,每个请求/应答,客户端和服务器都要新建一个连接,完成之后立即断开连接:当使用Keep-A ...
- 使用lambda编写九九乘法表
Java 8 出来有一段时间了,支持lambda表达式 非常的赞. lambda表达式 即匿名方法,属于一种轻量级的封装 lambda表达式的语法由参数列表.箭头符号->和函数体组成.函数体既可 ...
- 怎么更改win7登录界面
方法/步骤 1 第一步,先打开注册表.快捷键是win+R.Win就是Windows图片那个键.打开会是这个. 2 在其中输入Regedit.就打开了传说中的注册表了.然后在注册表中选择.选择的顺序 ...
- [CSP-S模拟测试]:God Knows(线段树维护单调栈)
题目描述 小$w$来到天堂的门口,对着天堂的大门发呆.大门上有一个二分图,左边第$i$个点连到右边第$p_i$个点.(保证$p_i$是一个排列).小$w$每次可以找左边某个对应连线尚未被移除的点$i$ ...
- JS基础入门篇(六)— 数据类型
1.数据类型 数据类型:我感觉就是对数据的种类进行分类.就好比把人分为儿童,青少年,中年,老年一样. 基础数据类型: Number(数字),String(字符串),Null(空),Undefined( ...
- node js 操作redis promise
连接 redis = require('redis') var client = redis.createClient('6379', '127.0.0.1'); client.on('connect ...
- LINUX 文件合并,去重
(1)两个文件的交集,并集前提条件:每个文件中不得有重复行1. 取出两个文件的并集(重复的行只保留一份)cat file1 file2 | sort | uniq > file32. 取出两个文 ...
- STM32几个IO的工作模式
浮空,顾名思义就是浮在空中,上面用绳子一拉就上去了,下面用绳子一拉就沉下去了. 开漏,就等于输出口接了个NPN三极管,并且只接了e,b. c极 是开路的,你可以接一个电阻到3.3V,也可以接一个电阻 ...
- JarvisOJ 逆向Writeup
1. 爬楼梯 先运行apk,查看具体的功能 爬一层楼是可以点击的,爬到了,看FLAG是不可以点击的.我们可以大致的了解到到了具体的楼层才可以看到flag,多次打开软件,楼层数目是随机的. 用APKID ...