前言

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. 51nod 1831: 小C的游戏(Bash博弈 找规律)

    题目链接 此类博弈不需要考虑sg函数,只需要确定必胜态和必败态,解题思路一般为打败先打表找规律,而后找规律给出统一的公式.打表方式:给定初始条件(此题中为ok[0]=ok[1]=0),然后从低到高枚举 ...

  2. [CF1168D]Anagram Paths

    题意:给一棵\(n\)个节点的二叉树,每条边上有一个小写字母或者\(?\),\(q\)次修改操作,每次修改某条边上的字符,问修改后是否存在一种方案,使得给所有\(?\)填上小写字母后,所有叶子到根的路 ...

  3. vue开发微信公众号--开发准备

    由于工作项目的原因,需要使用vue开发微信公众号,但是这种微信公众号更多是将APP套了一个微信的壳子,除了前面的授权和微信有关系以外,其他的都和微信没多大的关系了,特此记录 开发流程 首先需要在电脑上 ...

  4. webbench(web性能压力测试工具)

    在运维工作中,压力测试是一项很重要的工作.比如在一个网站上线之前,能承受多大访问量.在大访问量情况下性能怎样,这些数据指标好坏将会直接影响用户体验.但是,在压力测试中存在一个共性,那就是压力测试的结果 ...

  5. [LightOJ1070]Algebraic Problem

    题目:Algebraic Problem 链接:https://vjudge.net/problem/LightOJ-1070 分析: 1)$ a^n+b^n = ( a^{n-1}+b^{n-1} ...

  6. [CSP-S模拟测试]:math(裴蜀定理)

    题目传送门(内部题22) 输入格式 第一行有$2$个整数$n,k$.第二行有$n$个正整数$a_i$. 输出格式 第一行有一个整数$s$,表示可以生成的非负整数的个数.第二行有$s$个可以生成的非负整 ...

  7. SQL:REGEXP

    作为一个更为复杂的示例,正则表达式B[an]*s匹配下述字符串中的任何一个:Bananas,Baaaaas,Bs,以及以B开始.以s结束.并在其中包含任意数目a或n字符的任何其他字符串. 以下是可用于 ...

  8. error C2065: “CString”: 未声明的标识符 ;fatal error C1189: #error : afxstr.h can only be used in MFC proje

    转自VC错误:http://www.vcerror.com/?p=1388 问题描述: error C2065: "CString": 未声明的标识符 fatal error C1 ...

  9. webpack 中vue文件使用scss需要注意的地方

    需要使用npm添加node_sass和sass_loader 并且在配置文件中添加规则: { test: /\.scss$/, use: ["style-loader", &quo ...

  10. About Intel® Processor Numbers

    http://www.intel.com/content/www/us/en/processors/processor-numbers.html About Intel® Processor Numb ...