Vue.js

Vue.js是目前很火的一个前端框架,采用MVVM模式设计,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用,特别适合单页应用的开发。

Vue.js是数据驱动的,它通过一些特殊的语法,将DOM和数据绑定起来,无需手动操作DOM。一旦创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新。

安装 vue-cli

Vue 提供一个官方命令行工具vue-cli,可用于快速搭建大型单页应用。由于vue-cli是基于nodejs进行工作的,所以安装之前需要确保你的电脑已安装nodejs环境,完成后就可以安装vue-cli工具了:npm i vue-cli -g

快速构建vue应用

工具安装好后使用命令vue init webpack-simple [应用名称]即可在当前工作目录下创建一个最基本的vue应用,创建过程中会进行相关应用信息的配置,安装结果如图:

这样一个最基本的vue应用就搭建好了,我们按照提示的命令安装依赖模块并启动,完成后浏览器就会弹出应用主页了

cd myvue
npm install
npm run dev

安装依赖的过程可能比较慢,可以通过安装淘宝镜像解决:npm install -g cnpm --registry=https://registry.npm.taobao.org,之后安装依赖时使用cnpm替代npm即可,如:cnpm install

安装 vue-devtools 调试工具

vue-devtools是一款基于浏览器的vuejs应用的调试工具,支持Chrome、Firefox、Safari浏览器,用于调试vue应用,可以极大地提高我们的调试效率。

这里以Chrome浏览器为例,介绍vue-devtools的两种安装方式:

直接从chrome商店安装

Get the Chrome Extension

这种最简单的安装方式,但前提你懂的 ---- 翻墙

手动安装

这种方式稍微麻烦一点,首先我们要将vue-devtools的github项目clone到本地

git clone https://github.com/vuejs/vue-devtools.git

然后安装相关依赖模块

npm install

接着编译项目

npm run build

最后安装到Chrome浏览器中,打开浏览器的扩展程序页面

开启“开发者模式”,点击“加载已解压的扩展程序...”,选择vue-devtools\shells\chrome文件夹即可完成安装

使用

我们只需在vue应用页面点击F12快捷键,即可看见vue-devtools工具了

安装 postcss-loader

使用css来构建页面的样式时,为了考虑浏览器兼容问题,我们会使用兼容性前缀,比较繁琐,通过postcss就可以在编译的时候自动补全css代码的兼容性前缀了,不需要我们手动添加

首先我们需要安装postcss-loaderautoprefixer模块:npm install postcss-loader autoprefixer -S,接着打开webpack.config.js配置文件,修改以下地方:

然后我们需要单独创建postcss.config.js配置文件,放在应用根目录下,文件内容:



好了,我们看一下配置前后的效果吧

本文为作者kMacro原创,转载请注明来源:https://www.jianshu.com/p/6db27265cf45。

Vuejs之开发环境搭建的更多相关文章

  1. 最全Vue开发环境搭建

    前言 一直想去学Vue,不过一直找不到一个契机.然公司手机端用到了跨平台开发apicloud,里边涉及到Vue组件化开发,例如header和footer的封装,以及apicloud自定义的frame等 ...

  2. python开发环境搭建

    虽然网上有很多python开发环境搭建的文章,不过重复造轮子还是要的,记录一下过程,方便自己以后配置,也方便正在学习中的同事配置他们的环境. 1.准备好安装包 1)上python官网下载python运 ...

  3. IntelliJ IDEA安装及jsp开发环境搭建

    一.前言 现在.net国内市场不怎么好,公司整个.net组技术转型,就个人来说还是更喜欢.net,毕竟不是什么公司都像微软一样财大气粗开发出VS这样的宇宙级IDE供开发者使用,双击sln即可打开项目, ...

  4. Qt for Android开发环境搭建及测试过程记录

    最近学习了Qt的QML编程技术,感觉相较于以前的QtGUI来说更方便一些,使用QML可以将界面与业务逻辑解耦,便于开发. QML支持跨平台,包括支持Android平台,因此可以使用Qt的QML进行An ...

  5. node.js之开发环境搭建

    一.安装linux系统 (已安装linux可跳此步骤) 虚拟机推荐选择:VirtualBox 或者 Vmware (专业版永久激活码:5A02H-AU243-TZJ49-GTC7K-3C61N) 我这 ...

  6. TODO:小程序开发环境搭建

    TODO:小程序开发环境搭建 1.第一步当然是要先注册小程序了 2.登录到小程序 a)完善小程序信息,如名称,图标,描述 3.绑定开发者 4.获取AppID,并设置服务器信息 5.下载并安装开发者工具 ...

  7. Eclipse中Python开发环境搭建

    Eclipse中Python开发环境搭建  目 录  1.背景介绍 2.Python安装 3.插件PyDev安装 4.测试Demo演示 一.背景介绍 Eclipse是一款基于Java的可扩展开发平台. ...

  8. Windows 10 IoT Serials 1 - 针对Minnow Board MAX的Windows 10 IoT开发环境搭建

    目前,微软针对Windows IoT计划支持的硬件包括树莓派2,Minnow Board MAX 和Galileo (Gen 1和Gen 2).其中,Galileo (Gen 1和Gen 2)运行的是 ...

  9. Eclipse swt开发环境搭建

    原料: eclipse swt.下载链接为: Eclipse 4.6.2 Release Build: 4.6.2 配置说明: Developing SWT applications using Ec ...

随机推荐

  1. PHP防XSS 防SQL注入的代码

    作为开发人员时刻要记住一句话,永远不要相信任何用户的输入!很多时候我们的网站会因为我们开发人员写的代码不够严谨,而使网站受到攻击,造成不必要的损失!下面介绍一下如何防止SQL注入! 这里提供了一个函数 ...

  2. node.js之fs模块

    一.fs模块的mkdir函数,创建文件夹 var http = require("http"); var fs = require("fs"); var ser ...

  3. snprintf 返回值陷阱 重新封装

    snprintf()函数用于将格式化的数据写入字符串,其原型为: int snprintf(char *str, int n, char * format [, argument, ...]); st ...

  4. 高精速撸project A*B

    啊这个乘法我真的想不起来了 所以我跑去看了之前交的代码 那个时候的我真纯真啊,用cin cout都不关同步的 哪像现在,随手先写个inline void in(),能getchar()就不scanf, ...

  5. JS 转换数字为大写

    function toUpper(n) { n = n+''; var unit = '十百千万'; var num = '一二三四五六七八九 '; var array = new Array(); ...

  6. 在CentOS上为Docker开启SELinux

    a { color: #4183C4; text-decoration: none } a:hover { text-decoration: underline } ul,ol { padding-l ...

  7. 第五章 MVC之 FileResult 和 JS请求二进制文件

    一.FileResult 1.简介 表示一个用于将二进制文件内容发送到响应的基类.它有三个子类: FileContentResultFilePathResultFileStreamResult 推荐阅 ...

  8. 浏览器正确理解和使用GBK及UTF-8(UTF-8 + BOM)网页编码

    网页编码英文译为web page encoding.是在网页中指定其特定的字符编码格式的库. GBK是国家标准GB2312基础上扩容后兼容GB2312的标准. GBK的文字编码是用双字节来表示的.即不 ...

  9. PHP开发小技巧,让你瞬间提升逼格

    说到PHP代码的优化,PHP开发的小技巧我想很多人都有自己的一套,下面分享一些小技巧,希望对大家有所帮助. 1.循环内部不要声明变量,尤其是对象这样的变量. 2.foreach效率更高,尽量用fore ...

  10. mysql+mybatis递归调用

    递归调用的应用场景常常出现在多级嵌套的情况,比如树形的菜单.下面通过一个简单的例子来实现mysql+mybatis的递归. 数据模型 private Integer categoryId; priva ...