共计 2884 个字符，预计需要花费 8 分钟才能阅读完成。
首先将 Vue.js 下载到本地，本章就以本地的 Vue.js 为例。在本地创立一个工作区即创立一个文件夹，应用 vscode 关上，将 Vue.js 放到工作区目录下。
创立挂载元素
首先创立一个 index.html 的文件，应用 <script src=”./vue.js”></script> 加载 vue.js，这里的 ./vue.js 门路依据本人 Vue.js 文件地位而定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="./vue.js">
打印
</script>
</body>
</html>
创立 Vue 实例
创立 Vue 实例的目标是为元素提供数据、办法等
首先在 body 上面创立一个 <div> 标签，它的 id=”app”·
<div id="app"></div>
创立 Vue 实例
<div id="app">{{msg}}</div>
<script>
new Vue({
// Vue 实例
el: "#app", // el: 是一个挂载元素的关键字，前面的 #app 是 css 选择器，示意只在这个元素中起作用。data: {
// data 是贮存数据的中央，div 用到的数据贮存在这个中央
msg: "hello world", // msg 相似于变量名，援用用插值的形式 {{msg}} 来援用
},
methods: {// methods 外面用来定义方法},
});
</script>
将数据放在 data 中的益处就是不须要频繁的去批改 DOM 中的数据，而是间接的批改 data 中的数据即可。
Vue 外部指令
Vue 指令是为了对页面和数据操作更为便捷，这些操作就加左指令，通常以 v-xxx 示意。
罕用的指令为：
- v-if v-else: 元素是否存在
- v-show: 元素是否显示
- v-for: 循环
- v-on: 绑定事件：简写 @
- v-bind: 绑定属性: 简写 :
- v-model: 绑定数据
-
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="show(' 展现_if')"> 展现_if</button>
<button @click="show(' 展现_else_if')"> 展现_else_if</button>
<button @click="show(' 展现_else')"> 展现_else</button>
<p v-if="'展现_if' == is_show">hello_if</p>
<p v-else-if="'展现_else_if' == is_show">hello_else_if</p>
<p v-else>hello_else</p>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: "#app",
data: {is_show: "展现",},
methods: {show(tmp) {this.is_show = tmp;},
},
});
</script>
- @click 等同于 v-on:click 离开来看，它是由 v -on 和 click 组成；v-on 绑定事件监听器。能够用来绑定点击事件、键盘事件等；click 通过单词含意咱们能够晓得这是点击的意思，在这里示意点击事件；那么 v -on:click 合起来看，就示意监控点击事件。
- v-if 依据表达式有条件的渲染元素。当表达式满足条件后，才会进行渲染。
- v-else-if，等同与 v -if，与 v-if 或 v-else-if 组合应用。
- var vm = new Vue，顶一个 Vue 实例，实例名字为 vm。
- el，决定之后 Vue 实例会治理哪一个 DOM。
- data，Vue 实例对应的数据对象。
- methods，定义属于 Vue 的一些办法，能够在其余中央调用，也能够在指令中调用。
这里应用 npm 装置的 Vue 来创立我的项目。下面曾经介绍了 Vue 的装置，接下来就是初始化我的项目和下载环境所须要的依赖。
初始化我的项目
应用 vscode 关上一个工作区，在以后的目录下关上一个终端，输出 vue ui，Vue 就是启动一个 Web 服务，这是一个可视化的界面。
启动的服务地址为 http://localhost:8000 这里的地址以本人理论输入的为准。
通过浏览器拜访，这时呈现的就是初始化我的项目的页面。此时是没有我的项目的状态，点击创立。须要填写我的项目的门路，而后点击“在此创立新我的项目”。
须要填写我的项目的名字、包管理器、以及初始化 git（可选），而后点击下一步。
这里能够抉择手动配置，抉择本人须要的插件，当然也能够抉择其余的选项。次要抉择上面的这几个性能，点击下一步。
接下来 CSS pre-processor 抉择 stylus，而后点击创立我的项目。会弹出保留预设，这里抉择‘创立我的项目，不保留预设’即可。
Vue Web 端有下载插件的性能，点击下图的插件，而后点击增加插件。
搜寻 vuetify 和 axios 这两个插件，点击装置 –> 实现装置 –> 持续，插件装置实现。
我的项目构造
我的项目分为三大块：node_modules、public、src 以及其余的从属文件
node_modules 是用来寄存依赖的中央，这个文件十分的大，所以在上传到 git 的时候，通常不会上传这个文件，而是上传 package.json 的文件
这个文件记录了我的项目须要用到的依赖，安装文件中的依赖，只须要在命令行里输出 npm install 即可
public 中次要是寄存动态的资源文件
src 寄存我的项目源码及须要援用的资源文件。
- src 下的 assets：寄存我的项目中用到的资源文件，css、js、images 等。
- src 下的 componets：寄存 Vue 开发中的组件：HelloWorld.vue 等。
- src 下的 router：vue-router vue 路由的配置文件。
- src 下的 main.js：vue-cli 工程的入口文件。
每个文件的性能就不一一介绍了，次要的是下面这几个文件。
启动 Vue 服务：命令默认为 npm run serve应用浏览器关上上图的链接，就会显示出以后我的项目的主页。Vue.js 框架的应用就先说到这里啦，大家能够多多练习一下哦~
