1.Hello Vue.js
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>/*引入js文件 */
<script> new Vue({ /* 创建一个对象，两个属性。 */ el: '#app', data: { message: 'Hello Vue.js!' }, methods: { details: function() { return this.site + " - 学的不仅是技术，更是梦想！"; } }) </script>
{{ message }}
当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。
2.安装Node.js,配置环境，下载vue.
（1）Node.js下载网址：Download | Node.js
（2）检测PATH环境变量是否配置了Node.js，点击开始=》运行=》输入"cmd" => 输入命令"path"，输出结果环境变量中包含node.js的安装路径。node --version看是否正确显示版本。
（3）配置默认安装目录和缓存日志目录
-
首先在目标位置创建两个文件夹【node_global】及【node_cache】分别作为默认安装目录和缓存日志目录。
-
执行命令，将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录：
npm config set prefix "D:\Program Files\nodejs\node_global" npm config set cache "D:\Program Files\nodejs\node_cache"
npm config get prefix查看npm全局安装包保存路径npm config get cache查看npm装包缓存路径npm list -global命令来查看全局安装目录npm config list查看所有npm 配置(4)node.js环境配置
“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”，进入环境变量对话框
1、【系统变量】下新建【NODE_PATH】，此处设置第三方依赖包安装目录。如果跟着第2步修改了全局安装目录，则输入【D:\Program Files\nodejs\node_global\node_modules 】（真实路径下创建node_modules文件夹）
2、【系统变量】下的【Path】添加上node的路径【D:\Program Files\nodejs\】（如果已有的话就不用再设置了）
（5）配置淘宝镜像源
-
查看npm下载源 ：
npm config get registry
-
将npm的模块下载仓库从默认的国外站点改为国内的站点，这样下载模块的速度才能比较快，现在用的都是淘宝镜像源（https://registry.npm.taobao.org）
安装cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
验证:查看npm下载源是否配置成功，配置后为淘宝镜像，表示配置成功
cnpm config get registry` 或 `cnpm config list
(6).安装vue.js
cnpm install vue -g
查看安装的vue信息：
cnpm info vue
(7)安装webpack模板
-
在命令行中运行命令
npm install webpack -g，然后等待安装完成。 -
安装webpack-cli：
npm install --global webpack-cli， -
安装成功后可使用
webpack -v查看版本号。
(8)安装脚手架vue-cli 2.x
npm install vue-cli -g
用这个命令来检查其版本是否正确：vue --version或vue -V
这里顺手安装上vue-router
npm install -g vue-router
参考博客：Vue安装及环境配置、开发工具_袁小萌同学的博客-CSDN博客
打包
目录结构
v-html 指令用于输出 html 代码： v-html=" " v-else-if="" v-else
v-bind绑定Vue 实例的数据到 HTML 元素的属性 v-bind:class=" " //缩写 :class=""
v-if 指令进行判断。 v-if=" "
v-on 指令监听 DOM 事件 <a v-on:click="doSomething"> //缩写@click="doSomething"
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
v-for循环 v-for=" "
