vuejs入门-Hello案例(一)

1.使用传统方式开发:
官方下载vue.js的文件,地址:
https://cn.vuejs.org/v2/guide/installation.html

引用资源类似jQuery:
<script src="path/to/vue.js"></script>

使用:
<code>
<html>
<body>

<div id="app">
{{ message }}
</div>

<script src="path/to/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
<script>
</body>
</html>
</code>

这种开发方式不推荐,主要推荐第二种主流开发方式。

2.使用基于NodeJs依赖库:vue-cli的开发:
前提条件:
1.本机安装最新的nodejs【为了排除一些偏旧版本的兼容问题】;
2.知道下面的命令怎么用:我用的windows的win7,在任意盘符路径下,比如:D:\work\develop\vues\vue2_space目录下,shift+鼠标右键可以看到右键菜单多了一个菜单项:在此处打开命令窗口,其实也就是打开cmd命令窗口,只不过这种方式打开后dos命令的路径就在当前文件目录下。

<code>
npm install -g vue-cli
vue init webpack hello
cd hello
npm install
npm run dev
</code>
执行了最后一条命令之后稍等片刻,你的默认浏览器会打开一个访问8080端口的窗口,然后会显示一个vuejs经典的hello的页面。
痛点:如果你的电脑上8080端口已经被占用了,那么就会报错而无法看到上面的效果
良药:打开project/config/index.js文件:修改module.exports中:dev配置集合里的port参数,默认你应该可以看到8080,改成一个你本地非占用端口比如8888,然后再回到命令窗口执行最后一条命令就可以了。

上面这段我就不解释了,就是一个npm项目初始化和测试运行;
这样做了之后入门级的2个案例应该就跑ok了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本文作者 Jinkey(微信公众号 jinkey-love,官网 https://jinkey.ai)原文链接 h...
    JinkeyAI阅读 425,774评论 152 921
  • 1, 跨年夜后的鸡血看来也管不了几天,反而是更深地看到了自己的匮乏。 也开始为自己的懒惰找起借口来,时常浑浑噩噩地...
    昂酱阅读 660评论 8 10
  • 随着铺天盖地励志逆袭,屌丝逆袭成了职场高管,草根逆袭变成了行业精英,主妇逆袭事业爱情风光无限,这是时代的壮歌,这是...
    陌上扶桑阅读 232评论 0 1
  • 范玮琪 - 一个像夏天 一个像秋天 第一次见面看你不太顺眼/谁知道后来关系那么密切/我们一个像夏天一个像秋天 却总...
    青山不墨千秋画阅读 518评论 0 0
  • 丧偶的男人到香水店要求店主把妻子常用的香水停产,店主觉得浪漫,表示同意。 开先河后,香水店每年都会收到若干要求香水...
    妄想先生阅读 436评论 2 3