使用vue-cli搭建vue项目简单教程
一直没有时间来写些东西,今天就写写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项目简单教程的更多相关文章
- 使用@vue/cli搭建vue项目开发环境
当前系统版本 mac OS 10.14.2 1.安装node.js开发环境 前端开发框架和环境都是需要 Node.js vue的运行是要依赖于node的npm的管理工具来实现 <mac OS ...
- 利用脚手架vue cli搭建vue项目
vue.js https://vuejs.org/ 基础: http://cn.vuejs.org/v2/guide/installation.html 1.安装需要利用npm包管理器,所以首先安装n ...
- vue cli创建typescript项目
使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...
- Vue CLI及其vue.config.js(一)
有时候我们为了快速搭建一个vue的完整系统,经常会用到vue-cli,vue-cli用起来很方便而且命令简单容易上手,但缺点是在构建的时候我感觉有一些慢,因为CLI 服务 (@vue/cli-serv ...
- 一步一步使用ABP框架搭建正式项目系列教程之本地化详解
返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 本篇目录 扯扯本地化 ABP中的本地化 小结 扯扯本地化 本节来说说本地化,也有叫国际化.全球化的,不管怎么个叫法,反正道理都是一 ...
- [Vue CLI 3] vue inspect 的源码设计实现
首先,请记住: 它在新版本的脚手架项目里面非常重要 它有什么用呢? inspect internal webpack config 能快速地在控制台看到对应生成的 webpack 配置对象. 首先它是 ...
- Spring Boot +Vue 项目实战笔记(一):使用 CLI 搭建 Vue.js 项目
前言 从这篇文章开始,就进入真正的实践了. 在前端项目开发中,我们可以根据实际情况不同程度地使用 Vue.利用 Vue CLI(或写成 vue-cli,即 Vue 脚手架)搭建出来的项目,是最能体现 ...
- vue cli搭建项目及文件引入
cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载 ...
- 快速搞定用Vue+Webpack搭建前端项目(学习好久了,该写点东西了......)
现在开始安装环境 一.安装node.js 首先要安装node.js,去nodejs官网下载即可,地址:http://nodejs.cn/中文网. 安装完成后,打开终端(windows键+R)搜索cmd ...
- vue 脚手架搭建新项目以及element-ui等vue组件的使用
vue快速搭建项目(前提是你的电脑已经安装了node的环境和vue脚手架安装,不会的自行百度) 1:打开终端: 这里说下此时位置是在User下的lijuntao文件夹下面,我一般会在桌面新建一个文件夹 ...
随机推荐
- php面向对象深入理解(二)
一个简单的小程序: 配置 config.ini <?php //项目的根目录 define("ROOT","F:/文件夹的名字/oop/"); //数 ...
- Kafka高级API和低级API
Kafka消费过程分析 kafka提供了两套consumer API:高级Consumer API和低级API. 1 高级API 1)高级API优点 高级API 写起来简单 不需要去自行去管理offs ...
- NX二次开发-获取按钮的ID UF_MB_ask_button_id
NX9+VS2012 1.打开D:\Program Files\Siemens\NX 9.0\UGII\menus\ug_main.men 找到装配和PMI,在中间加上一段 TOGGLE_BUTTON ...
- vue中使用腾讯云Im
在vue中使用腾讯云Im 通信时,官方给出的文档及sdk提供的都是es5的写法.我们在vue中使用均需要用es6的方式来改写sdk的js文件及按自己所需要的业务调用对应的api就行了 1.对sdk的j ...
- csp-s模拟测试94
csp-s模拟测试94 一场简单题,打爆了.$T1$脑抽分解质因数准备分子分母消,想了半天发现$jb$互质直接上天,果断码了高精滚蛋.$T2$无脑手玩大样例,突然灵光一闪想到映射到前$K$大小的区间, ...
- fedora 18~20 中Qt 5.2.1 解决连接mysql数据库出现QMYSQL driver not loaded的问题
QT += sql //在.pro文件里加入这一句 //包含头文件 #include <QDebug> #include <QSqlQuery> #include ...
- JVM内核-原理、诊断与优化学习笔记(五):GC参数
文章目录 堆的回顾 串行收集器 并行收集器 ParNew(par-并行的缩写,new-新生代,所以只是新生代并行) Parallel收集器 参数设置 -XX:MaxGCPauseMills -XX:G ...
- CentOS7 相关配置
nginx 1.在线安装nginx yum install nginx 2.启动nginx服务 systemctl start nginx 3.防火墙设置 打开http防火墙:firewall-cmd ...
- 剑指offer——35二叉树的后序遍历
题目描述 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. 题解: 这道题,一开始以为将后序遍历排序后的得 ...
- 20140315 模板类pair的用法 2、visual 2010调整代码格式是ctrl+k+
1.模板类pair的用法 包含头文件#include<utility> http://blog.csdn.net/laixingjun/article/details/9005200 ...