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了