安装环境

  • 安装node.js并配置环境变量
  • 安装淘宝镜像,npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 安装webpack,cnpm install webpack -g
  • 安装脚手架npm install vue-cli -g

创建项目

  • 在硬盘上找一个文件夹放工程用的,在终端中进入该目录,cd目录路径
  • 根据模板创建项目,vue init webpack-simple 工程名字<工程名字不能用中文>vue init webpack 工程名字<工程名字不能用中文>,

    模板解读



  • cd进入创建的工程目录
  • 安装项目依赖,npm install,不要使用cnpm install安装(会导致后面缺了很多依赖库)
  • 安装 vue 路由模块vue-router和网络请求模块vue-resource,cnpm install vue-router vue-resource --save
  • 启动项目 npm run dev,启动完毕后,在浏览器输入http://localhost:8080,就能看到初始界面了

用vue官方提供的模板vue-cli搭建一个helloWorld案例的更多相关文章

  1. vue 快速入门 系列 —— 使用 vue-cli 3 搭建一个项目(上)

    其他章节请看: vue 快速入门 系列 使用 vue-cli 3 搭建一个项目(上) 前面我们已经学习了一个成熟的脚手架(vue-cli),笔者希望通过这个脚手架快速搭建系统(或项目).而展开搭建最好 ...

  2. vue 快速入门 系列 —— 使用 vue-cli 3 搭建一个项目(下)

    其他章节请看: vue 快速入门 系列 使用 vue-cli 3 搭建一个项目(下) 上篇 我们已经成功引入 element-ui.axios.mock.iconfont.nprogress,本篇继续 ...

  3. 如何快速的vue init 属于自己的vue模板?

    相信很多接触过vue的小伙伴非常熟悉了,我们在开启项目之前都需要vue init webpack xx来初始化自己的项目目录.但是在实际开发中我们往往会根据公司要求或者业务的需要会对目录进行局部的调整 ...

  4. 【vue系列之一】使用vue脚手架工具搭建vue-webpack项目

    对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一 ...

  5. Spring Boot +Vue 项目实战笔记(一):使用 CLI 搭建 Vue.js 项目

    前言 从这篇文章开始,就进入真正的实践了. 在前端项目开发中,我们可以根据实际情况不同程度地使用 Vue.利用 Vue CLI(或写成 vue-cli,即 Vue 脚手架)搭建出来的项目,是最能体现 ...

  6. (尚018-第二章2.1)Vue使用vue-cli创建模板项目

    2.1.1 1)vue-cli是官方提供的脚手架工具(注意:脚手架本身是个库) 2)github:https://github.com/vuejs/vue-cli 3)作用:从https://gith ...

  7. Vue对象提供的属性功能

    一. 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种: 1. 使用Vue.filter()进行全局定义 示例: < ...

  8. vue cli搭建项目及文件引入

    cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载 ...

  9. Vue.extend提供自定义组件的构造器

    Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器.经常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元 ...

随机推荐

  1. Order笔记-项目导入

    问题: @Override报错: @Override注释在jdk1.5环境下只能用于对继承的父类的方法的重写,但不能用于对实现的接口中的方法的实现.(也就是jdk1.5的 @Override这个ann ...

  2. java实现播放mp3功能

    1.首先引入jlayer.jar <!-- https://mvnrepository.com/artifact/javazoom/jlayer --> <dependency> ...

  3. select的限制以及poll的使用

    1.先说select在多路IO中的限制:1)linux中每个程序能够打开的最多文件描述符是有限制的.默认是1024.可以通过ulimit -n进行查看和修改: xcy@xcy-virtual-mach ...

  4. 让intellij idea 14 支持ES6语法

    用eclipse做前端开发,用到了webpack,结果各种依赖导致软件卡的一比,简直不能动!虽然在同事的帮忙下,修改了一下配置,但仍然卡的没脾气.改用intellij idea 14解决了卡的问题,但 ...

  5. iOS Button 上文字图片位置的设置

    1. 添加图片+文字/文字+图片 ,不分前后,图片默认在文字前边 加空格隔开 UIButton * button =[[UIButton alloc] initWithFrame:CGRectMake ...

  6. APP上传APP Store遇到的各种问题

    内容含敏感话题或对苹果不友好的信息(如苹果婊) 使用了友盟的统计SDK,获取了IDFA但是上传填写无广告 采用友盟IDFA的sdk,并用友盟的默认淘宝页面广告,被告知和产品内容不符(最近) App在i ...

  7. [置顶] xamarin android Fragment实现底部导航栏

    前段时间写了篇关于Fragment的文章,介绍了基础的概念,用静态和动态的方式加载Fragment  Xamarin Android Fragment的两种加载方式.下面的这个例子介绍xamarin ...

  8. [置顶] Xamarin android 调用Web Api(ListView使用远程数据)

    xamarin android如何调用sqlserver 数据库呢(或者其他的),很多新手都会有这个疑问.xamarin android调用远程数据主要有两种方式: 在Android中保存数据或调用数 ...

  9. Chrome调试折腾记_(1)调试控制中心快捷键详解!!!

    转载:http://blog.csdn.net/crper/article/details/48098625 大多浏览器的调试功能的启用快捷键都一致-按下F12;还是熟悉的味道;  或者直接 Ctrl ...

  10. 自定义tab吸顶效果一(原理)

    PS:问题:什么是吸顶,吸顶有什么作用,吸顶怎么使用? 在很多app商城中,介绍软件的时候就会使用吸顶效果, 吸顶有很多作用,一个最简单粗暴的作用就是,让用户知道此刻在浏览哪个模块,并可以选择另外的模 ...