安装vue环境

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=" "

---

为什么vue框架还需要用到node.js与npm:

Vue.js 是一个前端 JavaScript 框架，主要用于构建用户界面。但是，在使用 Vue.js 进行前端开发时，仍然需要使用 Node.js 和 NPM，原因如下：

1. 安装和管理依赖：Vue.js 作为一个框架，有许多依赖，如 Vue Router、Vuex 等等。这些依赖项都可以通过 NPM 包管理器来安装和升级。使用 NPM，我们可以方便地管理项目中使用到的所有依赖，确保所有开发者都使用相同的依赖版本，从而避免由于版本不一致而导致的问题。

2. 构建和打包应用程序：在开发过程中，我们需要将 Vue.js 应用程序编译成 HTML、CSS 和 JavaScript 文件，以便在浏览器中运行。Node.js 提供了一些工具和库，如 webpack、babel 等，使得我们可以轻松地构建和打包 Vue.js 应用程序。webpack 可以将所有的 JavaScript、CSS 和其他文件打包成几个文件，并自动处理依赖关系、代码拆分、压缩等操作。

3. 开发服务器：Vue.js 开发通常需要在本地启动一个 Web 服务器，以便在浏览器中预览和测试应用程序。Node.js 的 http 模块提供了一组 API，使得我们可以轻松地创建一个本地服务器。此外，还有一些第三方库，如 express、koa 等，可以提供更高级的功能。

总之，Vue.js 基于 JavaScript，在开发过程中需要使用到 Node.js 和 NPM 来管理依赖、构建和打包应用程序、启动本地服务器等。这些工具和库为我们提供了便利的开发环境，使得我们可以更高效地开发和调试 Vue.js 应用程序。

总结：vue需要依赖，需要运行环境，从而可以构建项目 ，调试程序。