美文网首页
vuejs的首次尝试

vuejs的首次尝试

作者: 张宪宇 | 来源:发表于2016-12-14 00:17 被阅读0次

前提是node和npm的版本更新一下,
node最好是3.0以上的node -v
//查看版本npm -v步骤如下

  1. npm install -g vue-cli相当于帮助你完成vue项目的架构建设

  2. vue init webpack my-project

  3. cd my-project npm install npm run dev
    此时http://localhost:8080出现index.html

4.如果需要发布 npm run build 此时生成一个dist的文件,其中包括能被浏览器识别的文件css,js,html npm install http-server -g http-server
此时打开http://localhost:8080的效果和npm run dev是一样的补充说一点:Sublime Text安装vue的插件:

  1. 先安装package control组件
    1). 按Ctrl+`调出console(注:安装有QQ输入法的这个快捷键会有冲突的,输入法属性设置-输入法管理-取消热键切换至QQ拼音)  
    2). 粘贴以下代码到底部命令行并回车:  
    import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())  
    3). 重启Sublime Text 3。

如果在Perferences->package settings中看到package control这一项,则安装成功。

  1. Crtl + Shift + p 调出 package control,输入 add repository,确定
  2. 输入 github 仓库地址,例如 https://github.com/vuejs/vue-syntax-highlight (Notice:结尾的.Git要去掉)
  3. Crtl + Shift + p 调出 package control,输入 install package,确定,然后再输入 github 仓库的名称,比如 vue-syntax-highlight,确定安装。

下面总结一下vue的原理
webpack+vue-loader+babel
在webpack加载.vue文件前,先调用vue-loader==>
vue-loader中调用babel转换ES6代码俄日ES5代码,把css和html作为模块也转换为客户端js代码(浏览器可以识别)
vuejs还有一个重要的特点:热加载
如果在Hello.vue中修改msg的内容,保存文件,页面会实时更新

相关文章

  • vuejs的首次尝试

    前提是node和npm的版本更新一下,node最好是3.0以上的node -v//查看版本npm -v步骤如下 n...

  • 首次尝试

  • 合唱的首次尝试

    原谅我不知道怎么插入音乐。 今天和一班的丢丢老哥合唱了一首学友的《慢慢》,哈哈,我俩都感觉声线很搭,然后发到群里,...

  • 首次尝试催眠

    2017年6月17日下午2点55分,雨天,在阳子老师的帮助下完成了第一次催眠,非常感谢!结束后坐在餐厅里感到从脐轮...

  • 首次尝试使用

    今天开始使用,希望尽快学懂@ 飞图-13702211830 爵色音乐会所设计案例

  • 首次尝试人像

  • 铅笔画13

    首次尝试画古风,果然不行

  • 检视阅读的首次尝试

    0. 前言 本文背景是,易仁永澄老师在《好好学习》的共读活动做的第一次分享,主题是《如何使用检视阅读提升阅读速度》...

  • 【原创】首次尝试的翻译~

    作者:若水君之 我将它翻译为: 《虹之印象》 如若我能够抓住天边的虹, 我定将送予你的手中。 共享它的美丽,当你心...

  • 首次尝试复盘

    一晃眼儿,我加入007这个大集体已经150天了。真是不可思议呢!仿佛就在昨天才刚加入,却已在不知不觉中践行了5个月...

网友评论

      本文标题:vuejs的首次尝试

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