安装环境

  • 安装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. MacBook 经常使用快捷键

    Mac OS X系统图形表示方法 ⇧ = shift ⌃ = control ⌥ = option / alt  Home=fn + ◄  End=fn + ►  Page Up=fn + ▲ Pag ...

  2. android之获取屏幕的宽度和高度

    获取屏幕的宽度和高度: 方法一: //获取屏幕的宽度 public static int getScreenWidth(Context context) { WindowManager manager ...

  3. 《RabbitMQ Tutorial》译文 第 6 章 远程过程调用(RPC)

    原文来自 RabbitMQ 英文官网的教程(6.Remote procedure call - RPC),其示例代码采用了 .NET C# 语言. In the second tutorial we ...

  4. 【转】Win10下 python3和python2同时安装并解决pip共存问题

    1.下载python3和python2 进入python官网,链接https://www.python.org/ 选择Downloads--->Windows,点击进入就可以看到寻找想要的pyt ...

  5. mongodb 3.4 集群搭建:分片+副本集

    mongodb是最常用的nodql数据库,在数据库排名中已经上升到了前六.这篇文章介绍如何搭建高可用的mongodb(分片+副本)集群. 在搭建集群之前,需要首先了解几个概念:路由,分片.副本集.配置 ...

  6. 为 Azure IoT Edge 设备部署 Azure Stream Analytics 服务

    在前面的两篇文章<Azure IoT Edge on Windows 10 IoT Core>和<Azure IoT Edge on Raspberry Pi 3 with Rasp ...

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

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

  8. linux下PHP后台配置极光推送问题

    一.composer.json配置注意空格 按照极光推送官网所述,在composer.json下写入: "require": { "jpush/jpush": ...

  9. 数据库的SQL优化

    1.对查询进行优化,要尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. (因为在条件查询条件添加索引,会直接被检索到列,会非常的快速) 2.应尽量避免在 wher ...

  10. xamarin android listview的用法

    listview也许是用的非常频繁的一个控件之一,下面我写一个xamarin的listview栗子,大家尝一尝xamarin android开发的乐趣.原谅我的大小写吧. listview绑定自定义的 ...