https://www.cnblogs.com/pengjunhao/p/6762141.html

https://www.cnblogs.com/yanxulan/p/8978732.html

查看node和npm的版本

node -v  或者  node --version

npm -v

cnpm -v

在中国为了提高效率,一般使用淘宝的镜像

http://npm.taobao.org/

npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了

假设上面的全部安装完毕,

全局安装vue-cli

  npm install --global vue-cli

如果是在mac电脑上,记得先sudo下

安装完毕,查看下 vue --version

脚手架安装成功后,就可以自己创建一个新的项目。

选择合适的目录进去,

运行 vue init webpack demo9之后敲击回车键

会自行下载一些模版,稍加等待,之后跳出一些需要填写的项目,如下

项目名称: 不支持大写字符了

项目描述:

一头雾水继续往下创建

创建完毕之后,进入目录下

cd demo9,看下现在的目录结构

npm i  或者用npm install 去下载需要的依赖

npm run dev

最后运行成功,告知了你的项目运行的url,自己打开浏览器输入,ok,出来了~~~

 Vue.js 不支持 IE8 及其以下 IE 版本。

新增加一个component,在Src包下的components目录下,新建一个Show.vue,里面塞入空模版

为了显示的更有代表性,我把HelloWorld中的模版内容删除了,也换了logo

注意代码是从index.html  ------ main.js   -------App.vue

下一步想将vue组建,累加使用

添加路由

npm install vue-router --save

之后在main.js 中引入

import VueResource from 'vue-resource'
在使用以下
Vue.use(VueResource)

安装Vue脚手架和创建一个简单的Demo的更多相关文章

  1. 使用.Net Core + Vue + IdentityServer4 + Ocelot 实现一个简单的DEMO +源码

    运行环境 Vue 使用的是D2admin: https://doc.d2admin.fairyever.com/zh/ Github地址:https://github.com/Fengddd/Perm ...

  2. vue 学前班002(创建一个实例)

    创建一个Vue实例 我们之前说过,Vue是数据驱动视图的,只要model(模型层)的数据改变了,Vue就会帮我们改变视图上显示的内容,不用我们自己去动手写代码更新.那么,它是怎么做到的,我们的代码要怎 ...

  3. 如何创建一个简单的Visual Studio Code扩展

    注:本文提到的代码示例下载地址>How to create a simple extension for VS Code VS Code 是微软推出的一款轻量级的代码编辑器,免费,开源,支持多种 ...

  4. npm——安装教程、安装vue脚手架

    npm:是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题.比如常用的有: 1)允许用户从NPM服务器下载别人编写的第三方包到本地使用. 2)允许用户从NPM服务器下载并安 ...

  5. 使用ssm(spring+springMVC+mybatis)创建一个简单的查询实例(三)(错误整理篇)

    使用ssm(spring+springMVC+mybatis)创建一个简单的查询实例(一) 使用ssm(spring+springMVC+mybatis)创建一个简单的查询实例(二) 以上两篇已经把流 ...

  6. django创建一个简单的web站点

    一.新建project 使用Pycharm,File->New Project…,选择Django,给project命名 (project不能用test命名)   新建的project目录如下: ...

  7. 一个先进的App框架:使用Ionic创建一个简单的APP

    原文  http://www.w3cplus.com/mobile/building-simple-app-using-ionic-advanced-html5-mobile-app-framewor ...

  8. 利用HTML5与jQuery技术创建一个简单的自动表单完成

    来源:GBin1.com 在线演示   在线下载 谷歌快速搜索自带大量自动完成插件——库中甚至还有一个附带的jQuery UI共享选项.然而今天我要寻找一个替代的解决方案.由DevBridge开发的j ...

  9. node创建一个简单的web服务

    本文将如何用node创建一个简单的web服务,过程也很简单呢~ 开始之前要先安装node.js 1.创建一个最简单的服务 // server.js const http = require('http ...

随机推荐

  1. 【Leetcode_easy】617. Merge Two Binary Trees

    problem 617. Merge Two Binary Trees     参考 1. Leetcode_easy_617. Merge Two Binary Trees; 完    

  2. 【c# 学习笔记】构造函数

    构造函数 主要用于创建类的实例对象.当调用构造函数创建一个对象时,构造函数会为对象分配内存空间,并初始化类的成员.构造函数分为实例构造函数和静态构造函数两种. 1.实例构造函数 实例构造函数用于创建和 ...

  3. Introduction - Unsupervised Learning

    摘要: 本文是吴恩达 (Andrew Ng)老师<机器学习>课程,第一章<绪论:初识机器学习>中第4课时<无监督学习>的视频原文字幕.为本人在视频学习过程中逐字逐句 ...

  4. JS的BOM操作语法

    整理了一下JS的BOM操作语法,这里记录一下. <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  5. 缓存利器之Ehcache

    EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点.是一种广泛使用的开源Java分布式缓存.主要面向通用缓存,Java EE和轻量级容器.另外Spring 提供了对缓存功能的抽象: ...

  6. Java程序员必会常用Linux速查手册

    目錄 系统服务管理 文件管理 查看日志 压缩与解压 磁盘和网络管理 防火墙 ftp操作 软件的安装与管理 其他 系统服务管理 systemctl 输出系统中各个服务的状态: systemctl lis ...

  7. 病毒 | wordpress网站内容被篡改、自动跳转、变全英文的解决办法

    去年10月开始,网站经常有文章被莫名其妙的篡改,而且后面还经常出现跳转到色情网站的问题,让人烦不胜烦,困扰了好几个月,最后终于解决了.这里特次记录和总结下此次恼人的事件. 时间:2018年10月 问题 ...

  8. 100天搞定机器学习|Day3多元线性回归

    前情回顾 [第二天100天搞定机器学习|Day2简单线性回归分析][1],我们学习了简单线性回归分析,这个模型非常简单,很容易理解.实现方式是sklearn中的LinearRegression,我们也 ...

  9. 写文章 通俗易懂 悲观锁、乐观锁、可重入锁、自旋锁、偏向锁、轻量/重量级锁、读写锁、各种锁及其Java实现!

    网上关于Java中锁的话题可以说资料相当丰富,但相关内容总感觉是一大串术语的罗列,让人云里雾里,读完就忘.本文希望能为Java新人做一篇通俗易懂的整合,旨在消除对各种各样锁的术语的恐惧感,对每种锁的底 ...

  10. 利用Filter和HttpServletRequestWrapper实现请求体中token校验

    先说一下项目的背景,系统传参为json格式,token为其中一个必传参数,此时如果在过滤器中直接读取request,则后续controller中通过RequestBody注解封装请求参数是会报stre ...