vue脚手架创建项目

Vue作为现在前端三大框架之一,又是国人开发的,现在已经越来越火。作为最轻量级的一个前端框架,入门简单,今天用脚手架创建一个最简单的应用。

因为npm在国内越来越不稳定,所以加一个淘宝镜像源。可以把npm定向到cnpm,不过我建议使用cnpm就好,这样就可以两个都使用。

打开命令行输入npm install -g cnpm --registry=https://registry.npm.taobao.org,等待安装完成。安装完成后输入cnpm --version,要是有输出一堆东西代表安装完成。

接下来安装Vue脚手架,建议全局安装,这样无论在哪里创建项目都可以,npm install vue-cli -g。

等待安装,安装完成后输入vue,有信息就是安装成功了。

接下来就是创建Vue项目了。我们用脚手架,就是直接使用官方推荐的webpack模板,要是有大牛级别配置的模板,好好珍惜。

就我知道,vue的模板有webpack、simple-webpack、simple、browserify、browserify-simple等。这些都是大牛配置好的放在Git上面开源的。我们一般使用的就是webpack这个模板。

Cd 打开到你想要放项目的目录,比如我放桌面,那么就是

接着输入vue init webpack demo,demo就是项目的名字。

然后前三个是项目名字、描述、作者,想填的填,不填的一路回车,路由要,敲y回车,到了这个

代码检查的,想挑战的可以挑战一下,就是分号、逗号、空格、空行等等都要特别标准,少了空格报错,少了逗号报错,所以我不建议开启,n回车。其他就可以一路y一路回车等待创建。这个过程看网络,可能要等待一会儿。

创建完成后cd demo,打开这个项目,以前的vue需要npm install或者cnpm install初始化一下package.json里面关联的依赖生成node_modules,最新的直接npm run dev,直接跑项目。

启动成功后

浏览器输入这个地址就可以访问了,老版本是可以自己打开浏览器的,新版本需要配置,以后再讲。

这样,一个简单的vue项目就创建完成了。是不是很简单。

(完)

Coding 个人笔记

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180604G2142400?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券