前言

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脚手架快速搭建项目的更多相关文章

  1. vue cli3.0快速搭建项目详解(强烈推荐)

    这篇文章主要介绍下vue-cli3.0项目搭建,项目结构和配置等整理一下,分享给大家. 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cl ...

  2. httprunner(3)用脚手架快速搭建项目

    前言 如何快速搭建一个httprunner项目呢?我们可以使用脚手架,脚手架就是自动地创建一些目录,形成一个项目的架构,不需要我们再手动的去创建 查看创建新项目的命令 先来查看一下帮助命令 httpr ...

  3. vue cli4.0 快速搭建项目详解

    搭建项目之前,请确认好你自己已经安装过node, npm, vue cli.没安装的可以参考下面的链接安装. 如何安装node? 安装好node默认已经安装好npm了,所以不用单独安装了. 如何安装v ...

  4. 使用angular-cli脚手架快速搭建项目

    第一步 安装全局的angular-cli, npm install -g @angular/cli 或者 cnpm install -g @angular/cli@v1.0.0-rc.2 – 国内淘宝 ...

  5. 让我们用Vue cli全家桶搭建项目

    一般项目都会用到这几个,这里不在详细介绍概念,只是简单的使用.一.搭建cli 1.事先安装好cnpm(淘宝镜像) npm install -g cnpm --registry=https://regi ...

  6. 使用Vue CLI 3快速创建项目

    首先 vue create ant-design-vue-pro 执行命令会显示两个选项,1默认,2自定义 我么选择自定义 选择好自定义的插件回车就等待下安装成功然后进入项目文件夹 cd ant-de ...

  7. 脚手架快速搭建springMVC框架项目

    apid-framework脚手架快速搭建springMVC框架项目   rapid-framework介绍:   一个类似ruby on rails的java web快速开发脚手架,本着不重复发明轮 ...

  8. 13. Vue CLI脚手架

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

  9. 基于Vue-cli 快速搭建项目

    Vue-cli可以快速帮助我们创建一个项目,这是官方给我们提供的脚手架.下面我说一下vue-cli的使用方法. 一.准备工作 在使用vue-cli时,首先需要安装nodejs,npm,其次需全局安装v ...

随机推荐

  1. boost Shared Memory

    Shared Memory Shared memory is typically the fastest form of interprocess communicatioin. It provide ...

  2. Component series.liquidFill not exists. Load it first.

    vue 项目中使用水波球报错Component series.liquidFill not exists. Load it first. 解决办法:安装 echarts-liquidfill npm ...

  3. 如何做好APP功能测试?

    一.如何做好app的测试工作? 22 个回答  斗魂大陆 凡是可能会出错的地方,一定会出错!--墨菲法则 腾讯有个平台可以实现适配兼容.服务器压力.性能测试.弱网络.耗电量测试等等,挺全面的.WeT ...

  4. flask入门到入土

    # Flask ## 0.Flask简介 Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用 ...

  5. Hadoop编程调用HDFS(JAVA)

    1.运行环境 开发工具:intellij idea JDK版本:1.8 项目管理工具:Maven 4.0.0 Hadoop环境: Cloudera QuickStart 2.GITHUB地址 http ...

  6. openoffice+pdf2swf+FlexPaper在线显示office和pdf

    前提:本人的系统为Ubuntu 13.10 64位系统.本篇是我在配置好环境后一段时间写的,所以操作上可能会有也错误,因此仅供参考. 搜索在线显示office和pdf,最常见的方法就是把都转为swf, ...

  7. 用 Flask 来写个轻博客 (19) — 以 Bcrypt 密文存储账户信息与实现用户登陆表单

    目录 目录 前文列表 修改 User Model Flask Bcrypt 将 Bcrypt 应用到 User Model 中 创建登陆表单 前文列表 用 Flask 来写个轻博客 (1) - 创建项 ...

  8. JDK 与 JRE

    JDK就是Java Development Kit.简单的说JDK是面向开发人员使用的SDK,它提供了Java的开发环境和运行环境.SDK是Software Development Kit 一般指软件 ...

  9. 配送单MYSQL ,一点都不机智

    这是配送单制作,后面修改了下表 . 写的太乱. 不过也不想去修改了. 放在这里了.反正还能用. 不然就坑爹了. 以后写好一点. 这都是些神马, 太难受了. /* 配送单制作,缺少商品规格,以及库存查询 ...

  10. python深浅拷贝的理解和区分

    import copy a1 = ['s1','s2','s3'] #可变数据类型 a = [1,2,a1] b = a a1.append('s4') #浅拷贝 c = copy.copy(a) # ...