ue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。

GitHub地址是:https://github.com/vuejs/vue-cli

一、安装Nodejs

首先需要安装Node环境。安装完成之后,可以在命令行工具中输入node -vnpm -v,如果能显示出版本号,就说明安装成功。

二、安装vue-cli

安装好node之后,我们就可以直接全局安装vue-cli:

npm install -g vue-cli

使用这种方式可能会安装比较慢,推荐大家使用国内的淘宝镜像来安装。(之前安装过了就不过多赘述了)

cnpm install -g vue-cli

如果安装失败,可以使用 npm cache clean 清理缓存,然后再重新安装。后面的安装过程中,如有安装失败的情况,也需要先清理缓存

安装完成后,可以使用vue -V(大写的V)查看vue的版本。

如果接下来你不知道要干嘛,那么你可以在命令行中输入

vue -help

它会有以下提示:

懂点英语的意思应该能看到提示的信息,聪明的你此时接下来执行vue list看看有哪些可用的官网模板:

vue list

Vue.js官方提供了两种类型的模板项目:

  • 基于vue cli和browserify的项目模板
  • 基于vue cli和webpack的项目模板

vue cli是Vue.js官方提供的命令行创建Vue.js项目脚手架的工具。这两种类型的项目模板分别提供了简单模式和完全模式,简单模式仅包含基于vue.js开发必要的一些资源和包,使用该模式可以快速地投入到开发。完全模式则还包括ESLink、单元测试等功能。

我们在这里使用webpack的项目模板。没有为什么,因为webpack有点叼叼的。

我们今天玩一下webpac-simple 基于webpack的简单模板。

再重申一遍,一定要使用命令行工具切换到你当前的目录下,类似这样

然后执行:

vue init webpack-simple my-project

init :初始化我们的项目。

webpack-simple:使用的哪个模板,这里我们先使用webpack-simple模板

my-project:表示我们项目的名字,这名字可以自己命名,但不要起成系统软件的一些名字,比如vue,node,npm等

执行如下命令

vue init webpack-simple my-project

接下来根据提示操作:

切换到当前目前,一定切换进来

cd my-project

下载当前项目所依赖的包

npm install

启动当前的项目

npm run dev

接下来见证奇迹的时刻来了,我们第一个vue的项目。只要出现如下界面,证明项目启动成功了。

17-vue-cli脚手架安装和webpack-simple模板项目生成的更多相关文章

  1. 13. Vue CLI脚手架

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

  2. 使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development、production)

    使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development.production) --mode 指定环境模式 ...

  3. Vue CLI 5 和 vite 创建 vue3.x 项目以及 Vue CLI 和 vite 的区别

    这几天进入 Vue CLI 官网,发现不能选择 Vue CLI 的版本,也就是说查不到 vue-cli 4 以下版本的文档. 如果此时电脑上安装了 Vue CLI,那么旧版安装的 vue 项目很可能会 ...

  4. vue之cli脚手架安装和webpack-simple模板项目生成

    ue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. GitHub地址是:https://github.com/vuejs/vue-cli 一.安 ...

  5. VUE知识day3_vue-cli脚手架安装和webpack模板项目生成

    ue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. GitHub地址是:https://github.com/vuejs/vue-cli 一.安 ...

  6. vue - vue-cli脚手架安装和webpack-simple模板项目生成

    ue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. GitHub地址是:https://github.com/vuejs/vue-cli 一.安 ...

  7. Vue学习笔记之vue-cli脚手架安装和webpack-simple模板项目生成

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. GitHub地址是:https://github.com/vuejs/vue-cli 一. ...

  8. Vue CLI 介绍安装

    https://cli.vuejs.org/zh/guide/ 介绍 警告 这份文档是对应 @vue/cli 3.x 版本的.老版本的 vue-cli 文档请移步这里. Vue CLI 是一个基于 V ...

  9. vue.cli脚手架初次使用图文教程

    vue-cli作用 vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程. vue-cli使用 !!前提:需要vue和webpack 安装全局vue-cli npm ...

  10. vue cli的安装与使用

    一.简介 vue作为前端开发的热门工具,受到前端开发人员的喜爱.为了简化项目的构建,采用vue cli来简化开发. vue cli是一个全局安装的npm包,提供了终端使用的命令.vue create可 ...

随机推荐

  1. 聚类——KFCM的matlab程序

    聚类——KFCM的matlab程序 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 在聚类——KFCM文章中已介绍了KFCM-F算法的理论知识,现在用m ...

  2. Teradata的profile使用

    1.proflie优势 使用profile可以批量管理用户参数,尤其是在一批用户具有相同的参数配置时,十分便捷. 2.profile可配置用户参数 [Account id][Default datab ...

  3. postgresql 按日期范围查询

    Timestamp without timezone 方法一: select * from user_info where create_date >= '2015-07-01' and cre ...

  4. Scrapy 框架 安装 五大核心组件 settings 配置 管道存储

    scrapy 框架的使用 博客: https://www.cnblogs.com/bobo-zhang/p/10561617.html 安装: pip install wheel 下载 Twisted ...

  5. C#编程の模板

    C#泛型编程已经深入人心了.为什么又提出C#模板编程呢?因为C#泛型存在一些局限性,突破这些局限性,需要使用C#方式的模板编程.由于C#语法.编译器.IDE限制,C#模板编程没有C++模板编程使用方便 ...

  6. go基础之数组和切片

    数组 数组的定义: 数组是具有固定长度并拥有零个或者多个相同数据类型元素的序列 定义一个数组的方法:var 变量名[len] type 例子:var a[5] int //3个整数的数组var a[5 ...

  7. 16.ajax_case01

    # 抓取北京市2018年积分落户公示名单 # 'http://www.bjrbj.gov.cn/integralpublic/settlePerson' import csv import json ...

  8. nginx-redirect配置

    转载一篇非常好的文章,大赞!!!!! http://blog.csdn.net/u010391029/article/details/50395680 nginx的配置文件解读 http://blog ...

  9. 在ASP.NET MVC中使用Redis

    一.Redis基本认知 1.含义: REmote DIctionary Server(Redis) | 是一个key-value存储系统 2.特性: 2.1 持久化:可以将内存中的数据保存在磁盘中,重 ...

  10. 009_python魔法函数

    11. (译)Python魔法方法指南 原文: http://www.rafekettler.com/magicmethods.html 原作者: Rafe Kettler 翻译: hit9 原版(英 ...