01vue-安装vue
2018-08-30 本文已影响0人
奶酪凌
资源
1.Vue.js2.0从入门到放弃---入门实例（一）
2.Vue.js入门学习（一）
3.Vue官方中文Api文档
使用脚手架vue-cli
第一，查看是否有node，npm
npm -v
node -v
image.png
第二，全局安装脚手架vue-cli
$ npm install -g vue-cli
image.png
利用vue list 查看可用模板
image.png
第三，利用webpack新建项目文件
$ vue init webpack exvue
(ps: exvue 是我新建的项目文件的文件名。你可以写自己的项目名称)
image.png
在安装过程中会有问题询问你，一般性的都是回车确定就好，除了一个ESlint的，选择了no。（ps：我不知道为什么要选择no，看的教程上基本是选择no的）
后面的一大串是说我的npm里面有一些是废除了的，还有什么chromedriver的，不明白，跳过。。。
第四，安装依赖包资源
$npm install （如果已经安装cnpm镜像，也可以使用cnpm install）
我在安装的时候会有一个报错，需要你自己重新安装一个依赖
image.png
解决方法，自己手动安装：$npm install ajv@^6.0.0
image.png
安装完成之后，在你新建的项目文件中有一个node_modules文件夹，这里面就保存着我们需要的依赖包资源
image.png
第五，运行vue
根据第三步，我们就会发现在你的目录下有一个exvue的文件夹（我的目录放在f盘下）
image.png
在这个文件夹下运行
$ npm run dev
image.png
image.png
红框部门表示，你运行的地址：在浏览器中输入该地址就能运行你刚刚新建的vue页面了。
image.png
不使用脚手架，直接引入vue.js开始学习
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
也可以运行vue文件,比较方便。
<!doctype html>
<html>
<head>
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">{{message}}</div>
<div id="app01" v-bind:title="title">鼠标移动上去，出现文字</div>
<script>
var data = new Vue({
el:'#app',
data:{
message:'hello,myself vue'
}
})
var data = new Vue({
el:'#app01',
data:{
title:'你好'
}
})
</script>
</body>
</html>
