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. php学习----基本介绍及数据类型

    php 官方手册:http://php.net/manual/zh/ 1.PHP(全称 Hypertext Preprocessor,超文本预处理器的字母缩写)是一种服务器端脚本语言,它可嵌入到 HT ...

  2. LeetCode算法题-Nth Digit(Java实现)

    这是悦乐书的第215次更新,第228篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第83题(顺位题号是400).找到无限整数序列的第n个数字1,2,3,4,5,6,7,8 ...

  3. LeetCode算法题-House Robber(Java实现)

    这是悦乐书的第187次更新,第189篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第46题(顺位题号是198).你是一个专业的强盗,计划在街上抢劫房屋. 每个房子都藏着一 ...

  4. 7个小技巧,解决eclipse卡顿问题

    eclipse作为开发工具,每天都要使用,你肯定遇到过eclipse卡到想哭的时刻,严重影响开发效率啊!如果内存条不要钱,那就加内存吧!一个不够加两个!当然这都是玩笑话,如果不花钱也能解决问题,希望下 ...

  5. 精度 Precision

    柏拉图认为,尽管世间万物是不完美的,但存在一种永恒不变的形式,这个形式是完美的,而生命的意义就是让这个世界尽可能的接近这个完美的形式. 怎么理解这句话,和我们今天讲的精度有什么关系.我们先举一个例子, ...

  6. MySQL高级知识(二)——Join查询

    前言:该篇主要对MySQL中join语句的七种情况进行总结. 0.准备 join主要根据两表或多表之间列的关系,从这些表中进行数据的查询. 首先创建两张表:tb_emp(员工表)和tb_dept(部门 ...

  7. C++编写 动态链接库dll 和 调用dll

    参考:https://jingyan.baidu.com/article/ff42efa92c49cfc19e2202fd.html 和htps://jingyan.baidu.com/article ...

  8. python入门学习:5.字典

    python入门学习:5.字典 关键点:字典 5.1 使用字典5.2 遍历字典5.3 嵌套 5.1 使用字典   在python中字典是一系列键-值对.每个键都和一个值关联,你可以使用键来访问与之相关 ...

  9. Flask-信号(blinker)

    简单了解信号 Flask框架中的信号基于blinker,其主要就是让开发者可是在flask请求过程中定制一些用户行为.简单来说就是flask在列表里面,预留了几个空列表,在里面存东西.信号通过发送通知 ...

  10. SSH远程SOLARIS11时被拒绝

    在虚拟机中新安装的solaris11,安装过程中配置了静态IP地址用以方便ssh连接,使用root用户ssh连接时,密码没有错,但总是提示密码被拒绝,连接established 代表是通的,telne ...