Vuejs之开发环境搭建

作者: kMacro | 来源:发表于2018-01-06 22:31 被阅读122次

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
vuejs应用主页

安装依赖的过程可能比较慢,可以通过安装淘宝镜像解决: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-devtools

使用

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

vue-devtools

安装 postcss-loader

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

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

修改webpack.config.js

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

postcss.config.js
好了,我们看一下配置前后的效果吧 css源码 postcss配置前 postcss配置后

本文为作者kMacro原创,转载请注明来源:https://zkhdev.github.io/2018/01/06/vuejs-begin/

相关文章

  • Vuejs之开发环境搭建

    Vue.js Vue.js是目前很火的一个前端框架,采用MVVM模式设计,它是以数据驱动和组件化的思想构建的。相比...

  • Vuejs开发环境搭建

    其他文章Vuejs的生命周期函数vue-router配置vue模板语法vue计算属性和侦听器vue Class与S...

  • vuejs开发环境搭建

    1.使用cnpm (gzip 压缩支持) 命令行工具代替默认的 npm 2.查看cnpm版本 3.通过cnpm安装...

  • vuejs开发环境搭建

    vue开发环境搭建(官方推荐命令) 必须有node环境 1.创建&启动项目(webpack创建) 2.创建&启动项...

  • Vue两种搭建方式

    搭建vue的开发环境:https://cn.vuejs.org/v2/guide/installation.htm...

  • windows下搭建Vuejs开发环境

    1 nodejs是前端开发必不可少的工具 官网:http://nodejs.cn/ 我安装的是2017年...

  • Weex开发之-Hello Weex

    上一篇写了Weex的开发环境搭建Weex开发之-开发环境搭建[https://www.jianshu.com/p/...

  • react native开发之使用安卓模拟器调试及hot rel

    接上文,react native开发之webstorm搭建开发环境并创建运行项目,讲完了从搭建开发环境到打包apk...

  • #Vuejs 开发环境搭建以及热更新

    vuejs是一种介于react和angular中间的轻量级的mvvm框架,主要是数据绑定和组件化,先来介绍下如何用...

  • Runtime

    kyson老师 iOS开发之runtime(1):runtime调试环境搭建iOS开发之runtime(2):浅析...

网友评论

    本文标题:Vuejs之开发环境搭建

    本文链接:https://www.haomeiwen.com/subject/asfunxtx.html