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的项目。只要出现如下界面,证明项目启动成功了。

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

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

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

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

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

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

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

  4. vue搭建cli脚手架环境(出现问题及解决,主要是node版本低)

    Vue 提供了一个官方的cli,为单页面应用 (SPA) 快速搭建繁杂的脚手架. 一.vue cli脚手架 脚手架通过webpack搭建开发环境 使用ES6语法 打包压缩js为一个文件 项目文件在环境 ...

  5. vue学习笔记——脚手架安装

    项目启动:npm run build 脚手架 vue cli vue cli --2 安装命令 #全局安装 npm install --global vue-cli #卸载vue-cli  npm u ...

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

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

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

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

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

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

  9. 04 vue-cli 脚手架、webpack-simple模板项目生成、组件使用

    alice https://www.cnblogs.com/alice-bj/p/9317504.html https://www.cnblogs.com/alice-bj/p/9318069.htm ...

随机推荐

  1. apt-get/dpkg常用指令备查

    apt-get install <package> Downloads <package> and all of its dependencies, and installs ...

  2. MVC的简单分页【转】

    传值的方式是通过querystring. 本例子是把整需要的数据查出来再分页的,因为当时做的时候数据很少,只有几十条. 如果数据多的话,可以在存储过程里分页,只是要传页码和记录的条数过来. 控制器: ...

  3. Centos6下Python3的编译安装

    本文转载自 Centos6下Python3的编译安装 系统环境:CentOS 6.8-Minimal 安装Python依赖包: 1 [root@Python src]# yum install zli ...

  4. HTML-锚点-JS跳转锚点

    window.location.hash使用说明,这篇写的挺详细的 http://www.cnblogs.com/nifengs/p/5104763.html a标签的话是 name,div呢是id, ...

  5. Esper学习之七:EPL语法(三)

    1.Aggregation 和SQL一样,EPL也有Aggregation,即聚合函数.语法如下: aggregate_function([all|distinct] expression) aggr ...

  6. 【规范】alibaba编码规范阅读

    一.编程规范 (一)命名规范 1.代码中的命名均不能以下划线或美元符号开始,也不能以下划线或美元符号结束 2.代码中的命名严禁使用评语与英文混合的方式,更不允许直接使用中文的方式 3.类名使用Uppe ...

  7. 修改JS文件不能及时在页面中体现,需重启浏览器?

    对JS文件做个小小的改动,哪怕是加一句简单的ALERT语句,都要重启浏览器才能看到.你有这样的烦恼吗?怎样不用重启浏览器就能及时体现JS的变化呢? 对浏览器(IE)做如下设置即可:1.点击 工具栏 - ...

  8. css3整理--text-overflow

    text-overflow语法: text-overflow : clip | ellipsis clip:表示不显示省略标记(...),而只是简单的裁切,需要在一定的高度范围内配合overflow: ...

  9. POJ 1117 Pairs of Integers

    Pairs of Integers Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 4133 Accepted: 1062 Des ...

  10. [BeiJing2011]元素[贪心+线性基]

    2460: [BeiJing2011]元素 Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 1245  Solved: 652[Submit][Stat ...