一直没有时间来写些东西,今天就写写vue脚手架吧,初建一个vue项目。

vue是近段时间来特别火的一个mvvm框架,小巧、简单、易学,如果你的前端基础还好的话,学起来挺简单的。官网地址: https://cn.vuejs.org/  官方文档写的非常详细。

好了,废话不多说,开始!

我只是说一下vue-cli,所以,

1、你要先安装一下node,从node官网上 https://nodejs.org/en/  下载安装,安装完毕可以在终端上检测一下是否安装成功,node -v , 出现版本号就证明安装成功了,安装好之后npm也就安装成功了,可以直接试一下npm -v,

出现版本号就ok。

2、安装vue,npm install vue。

3、全局安装vue-cli,npm install --globle vue-cli,脚手架安装之后以后再创建项目就不用重复安装了。

4、创建一个基于webpack的模板的新项目,也有其他的模板,大家可以百度了解一下,vue init webpack vue-demo。vue-demo是你项目的名称,安装完成会自动创建名为vue-demo的项目。

5、切换到你的项目 cd vue-demo,安装依赖,npm install。

6、最后一步,npm run dev!

出现这个就可以了。

我写了一个小demo,https://github.com/XiaoyingL/vue-demo ,里面用到了vue-resource,vue-router,有需要的可以看看,欢迎指正!

使用vue-cli搭建vue项目简单教程的更多相关文章

  1. 使用@vue/cli搭建vue项目开发环境

    当前系统版本 mac OS 10.14.2 1.安装node.js开发环境 前端开发框架和环境都是需要 Node.js  vue的运行是要依赖于node的npm的管理工具来实现 <mac OS ...

  2. 利用脚手架vue cli搭建vue项目

    vue.js https://vuejs.org/ 基础: http://cn.vuejs.org/v2/guide/installation.html 1.安装需要利用npm包管理器,所以首先安装n ...

  3. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

  4. Vue CLI及其vue.config.js(一)

    有时候我们为了快速搭建一个vue的完整系统,经常会用到vue-cli,vue-cli用起来很方便而且命令简单容易上手,但缺点是在构建的时候我感觉有一些慢,因为CLI 服务 (@vue/cli-serv ...

  5. 一步一步使用ABP框架搭建正式项目系列教程之本地化详解

    返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 本篇目录 扯扯本地化 ABP中的本地化 小结 扯扯本地化 本节来说说本地化,也有叫国际化.全球化的,不管怎么个叫法,反正道理都是一 ...

  6. [Vue CLI 3] vue inspect 的源码设计实现

    首先,请记住: 它在新版本的脚手架项目里面非常重要 它有什么用呢? inspect internal webpack config 能快速地在控制台看到对应生成的 webpack 配置对象. 首先它是 ...

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

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

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

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

  9. 快速搞定用Vue+Webpack搭建前端项目(学习好久了,该写点东西了......)

    现在开始安装环境 一.安装node.js 首先要安装node.js,去nodejs官网下载即可,地址:http://nodejs.cn/中文网. 安装完成后,打开终端(windows键+R)搜索cmd ...

  10. vue 脚手架搭建新项目以及element-ui等vue组件的使用

    vue快速搭建项目(前提是你的电脑已经安装了node的环境和vue脚手架安装,不会的自行百度) 1:打开终端: 这里说下此时位置是在User下的lijuntao文件夹下面,我一般会在桌面新建一个文件夹 ...

随机推荐

  1. php给每个数组元素加上前缀

    比如原数组是 array('1','2','3','4'); 我需要得到的结果 array('aaa1','aaa2','aaa3','aaa4'); 用内置函数如何实现? array_walk() ...

  2. Python 爬取拉钩网工作岗位

    如果拉钩网html页面做了调整,需要重新调整代码 代码如下 #/usr/bin/env python3 #coding:utf-8 import sys import json import requ ...

  3. idea和eclipse快捷键对比(转)

    分类 功能点 Eclipse快捷键 IDEA快捷键 搜索 搜索文本 Ctrl + F Ctrl + F Ctrl + R 查找替换 Alt + P/A 逐个/全部替换 Alt + F3 查找当前选中词 ...

  4. 实现组件props双向绑定解决方案

    注意: 子组件不能直接修改prop过来的数据,会报错 方案一: 用data对象中创建一个props属性的副本 watch props属性 赋予data副本 来同步组件外对props的修改 watch ...

  5. LeetCode 1103. Distribute Candies to People (分糖果 II)

    题目标签:Math 题目让我们分发糖果,分的糖果从1 开始依次增加,直到分完. for loop可以计数糖果的数量,直到糖果发完.但是还是要遍历array 给people 发糖,这里要用到 index ...

  6. 4、postman的常见断言

    推荐我的另一篇文章  浅谈JSONObject解析JSON数据,这篇文章原理类似,使用java或者beanshell进行断言解析json数据 介绍断言之前,我们先测试1个接口: 接口地址:https: ...

  7. C89,C99: C数组&结构体&联合体快速初始化

    1. 背景 C89标准规定初始化语句的元素以固定顺序出现,该顺序即待初始化数组或结构体元素的定义顺序. C99标准新增指定初始化(Designated Initializer),即可按照任意顺序对数组 ...

  8. 4.8 this关键字

    /** * 测试this * @author Hank * */ /* 创建一个对象分为如下四步: 1.分配对象空间,并将对象成员变量初始化为0或空 2.执行属性值的显示初始化 3.执行构造方法 4. ...

  9. JQuery AJAX 通过一般处理程序 取列表

    由于上一篇的积累 这一个就简单了 也就是把反回了字符串 显示到table中 $("#btnSearch").click(function () { $.post("Cur ...

  10. launch-s.sh 发布脚本备份

    [root@izm5ef2ow9zssfxi6opoucz code]# cat launch-s.sh serverId=1313 zipName=$1 serverPath='code-s'$se ...