详细教程 Node环境和Vue脚手架的搭建及其作用( 二 ) _Node

2.Vue脚手架搭建
①已经安装过node.js之后和淘宝镜像的话，vue的运行环境基本上就搭建好了，只需再安装全局的webpack（命令行：npm install webpack -g ）和vue-cli脚手架工具（在命令行里输入：npm install -g vue-cli ）就行了。

文章插图

文章插图
②输入 vue init webpack mypro 回车创建项目：

文章插图
【详细教程 Node环境和Vue脚手架的搭建及其作用】③进入项目文件夹：cd mypro (cd + vue init webpack mypro 中的项目名字mypro)，回车进入项目文件夹：
输入： npm install 初始化，安装依赖包node_modules
④安装完成后输入：npm run dev 运行就行了。
3.Vue的作用
①控件自动跟数据绑定，提交表单到后台的时候，可以直接使用data里面的数据值，而不需要再使用$("#id")那一套方法来获取控件的值，对控件赋值也方便很多，只需要改变data的值，控件就会自动改变值。将复杂的界面操作，转化为对数据进行操作。
②页面传值和状态管理
Vue的页面传值可供选择的方法非常多，比如使用子组件属性传值，比如使用页面url参数的方法传值，或使用vuex全局状态管理的方法页面传值等等。而原生开发的时，在页面有多个参数的时候，页面传值和初始化要复杂很多。而vue直接将参数保存在对象里面，直接给子组件的属性或vuex存储一个对象就行了。
③模块化开发、模块化更新
就像第二点所说的，其实可以引申到模块化开发。比如一个列表页面里面有添加功能，有修改功能，这时我们可以通过引用子组件的形式，当子组件内容更新的时候，修改主组件的数据，比如修改了一条数据后，我们需要列表页同时刷新，但我们不希望改变原来列表页的页码和搜索条件。假如你用原生开发来实现这个，需要写很多业务逻辑保存上一个页面的搜索条件和页码这些参数，但假如你用vue开发，将变得非常简单。
④代码可读性
Vue天生具有组件化开发的能力，因此不同的功能基本都是写在不同的模块里面，代码的可读性非常高。当一个新手接手一个旧项目的时候，基本上可以做到一到两天就能定位到要修改的代码，并进行修改。
⑤基于强大的Nodejs，添加新的组件库，基本一句npm命令就能安装。比如当我需要使用axIOS组件的时候，直接npm install axios安装一下，就可以使用axios这个组件。熟悉maven的同学估计很容易就能理解npm工具。
⑥主路由、子路由、主页面、子组件的方式，可以让我们彻底抛弃iframe 。写过前端的同学都知道，因为iframe的滚动条、和子页面跟其他页面的交互性这些原因、用户体验还是远远没有单页面架构友好。而且使用Vue非常简单方便地实现系统菜单、导航等固定布局。
⑦css模块化：各个组件之间，可以使用相同的样式名，但有不同的样式属性。比如组件A和组件B的button都绑定了class="btn", 但在两个组件里，我们可以实现两个不同的btn样式属性，互不影响。