详解Vue.js入门环境搭建


Posted in Javascript onMarch 17, 2017

vue这个新的工具,确实能够提高效率,在经历的一段时间的摧残之后,终于能够有一个系统的认识了,下面就今天的收获做一个总结,也是vue入门的精髓:

1.要使用vue来开发前端框架,首先要有环境,这个环境要借助于node,所以要先安装node,借助于node里面的npm来安装需要的依赖等等。

这里有一个小技巧:如果在cmd中直接使用npm来安装的一些工具的话会比较慢,所以我们使用淘宝的npm镜像:
输入npm install -g cnpm ?registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了

安装完npm镜像后,开始安装全局vue-cli脚手架,之所以要用vue-cli,是应为这个工具能帮我们搭建好我们需要的模板框架,比较简单。方法:cnpm install -g vue-cli 回车,验证是否安装成功,在命令行中输入vue,出来vue的信息说明安装成功

详解Vue.js入门环境搭建

 2.安装完脚手架以后开始,开始创建一个新项目:命令 vue init webpack vue_project(最后这个是我创建的项目文件夹的名字)

详解Vue.js入门环境搭建

至此,一个新的项目文件夹就创建完成,这个项目文件是在使用了脚手架vue-cli的前提下创建的,所以使用了这个工具提供的默认版式。

详解Vue.js入门环境搭建

这就是使用脚手架搭建的项目文件的结构

3.因为各个模板间都是相互依赖的,所以要安装依赖,在命令行输入cnpm install ,你会发现在已经创建的项目结构里面会多出一个node_modules的文件夹,里面就是刚才安装的所有依赖。

4.准备工作做好以后,测试一下项目里面默认的app.vue模块能否跑起来,这是需要先安装一下服务器环境,在命令行中输入
cnpm run dev 回车即可

详解Vue.js入门环境搭建

8080就是默认的端口,在浏览器地址栏中输入localhost:8080会发现默认的模块打开了!

注:如果已经全局安装过vue-cli了,再搭建项目的时候无需再安装一遍,直接使用vue init webpack 项目名 即可

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 检测浏览器和操作系统的脚本
Dec 26 Javascript
jquery 多行滚动代码(附详细解释)
Jun 17 Javascript
基于jQuery的简单的列表导航菜单
Mar 02 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
Angular学习笔记之angular的$filter服务浅析
Nov 12 Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 #Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 #Javascript
基于bootstrap实现收缩导航条
Mar 17 #Javascript
javascript基本数据类型和转换
Mar 17 #Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 #Javascript
js实现一键复制功能
Mar 16 #Javascript
js判断PC端与移动端跳转
Dec 24 #Javascript
You might like
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
php数组中删除元素的实现代码
2012/06/22 PHP
php实现12306余票查询、价格查询示例
2014/04/17 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
12 款 JS 代码测试必备工具(翻译)
2016/12/13 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
ES6入门教程之let和const命令详解
2017/05/17 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
python中map的基本用法示例
2018/09/10 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
函授自我鉴定
2013/11/06 职场文书
幼儿运动会邀请函
2014/01/17 职场文书
师说教学反思
2014/02/07 职场文书
《第一次抱母亲》教学反思
2014/04/16 职场文书
2015年药店工作总结
2015/04/20 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
导游词之张家口
2019/12/13 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
Java界面编程实现界面跳转
2022/06/16 Java/Android