3,Vue初探

地方的进度搭建好了Vue的脚手架,大家先看看网站目录下多少个文本。

json 1

在此处写第二行Vue代码么?
问了下朋友才精通,应该打开 Components目录,如下:

json 2

开拓 这几个 Hello.vue文件,vue的面罩终于报料了:

json 3

原来 Hello World 写在那里在。不过怎么运营吧?朋友提示,应该在
node.js命令行运转

npm run dev

 

可惜,报错:

json 4

 

原本8080端口被占用了,去IIS关闭使用该端口的网站,重国民党的新生活运动行此命令,出现上面成功的界面:

json 5

OK,在IE11浏览器上输入该网址:http://localhost:8080/ 熟习的界面出来了:

json 6

于今,大家将 Hello.vue 文件之中的 Hello
world前边删除3个空格,保存,页面立刻发出了不当:

json 7

这边提示格式错误了,咨询朋友说,官方的转变的代码会用eslint检查格式。。。

你能够用/*eslint-disable
*/禁止使用格式检查,要不空格缩进都无法乱写,五个空格都要给您报错。

好啊,先补齐那多个空格。不用刷新页面,编辑完Vue文件保存后就立即看到了成效,这也是Vue(应该正是Vue脚手架框架)神奇的地点!

2,配置Vue环境

一伊始看《基于Webpack、Vue、Vue-Router 的 SPA
初体验
》那篇小说,照着试了试,发现不懂Webpack,而且照着小说一路做也没用成功,所以转求朋友咨询,找到了Vue闽南语官网的安装小说,打开程序初步菜单
Node.js–>node.js command prompt 进入node.js 的命令行,

先是在 C盘建立二个目录 App2,然后 cd c:\App2

下一场,根据提醒依次输入下边包车型大巴多少个指令:

# 全局安装 vue-cli
$ npm install -g vue-cli
# 创建一个基于 "webpack" 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev

Windows同学不要输入前面包车型客车 #,$ 符号

提议设置前先安装cnpm模块,npm由于国内被墙的来头,安装依赖会拾分慢。。。。。(不懂cnpm的同桌能够看下
这里

本人是FQ安装的,也等了很久很久才安装完。

设置进度中,会略微警告和谬误,先忽略吧。

末尾,会有二个C:\App2\my-project
的目录,假如像上面的典范,就代表成功了:

json 8

直面这么多文件,不精晓怎么打开,后来由此VS的
“打开网址”格局,在VS中开辟了。

那会儿,Vue的支付环境到底基本搭建好了。

题记:关切Vue.js
很久了,但尽管没有入手写过一行代码,后天备选动手,却发现自个儿比菜鸟还菜,于是四方寻找大牛指导,才总算找到了入门的“入门”,固然是“入门指南”的“前传”吧。此文献给跟本身同样“白痴级别”的前端开发人员,大牛请绕过。

1,下载安装Node.js

Node.js 官网下载2个Windows环节的设置包
node-v6.2.0-x64.rar 文件,一路安装下来即可。官网访问一点也不快,能够试行中文网
http://nodejs.cn/

4,配置sublime Text

眼下使用VS来编排Vue的品种,没有插件扶助,对应格式和智能提示就从未有过,所以朋友推荐应用
sublime text,能够设置Vue插件,下边是安插进程

率先安装sublime Text 3,去官网下载安装程序;

下一场安装 sublime Package Control,具体问下“度娘”,此处略。

设置好后,按 Ctrl+Shift+P 弹出上边包车型大巴界面,就表示成功了:

json 9

随之,下拉选用 Install Package ,假使没有反应,或然“被墙”了。

开辟菜单 Preferences->Packges Settings->Package
Control->Setting Default ,会看出上边包车型地铁始末:

json 10

文件 channel_v3.json
的地方看能还是无法访问,假设不能够访问,那么势必被墙了,先想法去墙外下载此文件,放到本地三个站点上,比如自身的地址:

http://localhost/doc/channel\_v3.json

接下来将原来配置中的地址替换成那个。

只是发现此文件无法保存,鼠标放到此窗口的“页签”上难忘此文件的地方,找到下列类似的目录:

C:\Users\【当前登录用户名】\AppData\Roaming\Sublime Text
3\Packages\Package Control\Package Control.sublime-settings

恒定到 Packages 目录下,建立2个 Package
Control
目录,然后重新打开前边的菜谱,打开此文件,就能够修改并保留了。

自此,输入 Vue字样在 Package Control上,出现上边的界面,就OK了:

json 11

选料第二个:Vue Syntax Highlight

随后,再另行打开Vue的文书,出现下边高亮窗口,就大功告成了!

json 12

 

时至后天,Vue框架入门指南的“前传”便探索形成了。

你有如何疑难,大家一同读书啊!

 

相关文章

网站地图xml地图