Vue项目建立 (一)

从构建项目开始来讲讲遇到的那些坑~

vue与原生开发最简单的区别就是它的设计模式MVVM

M：（model）数据模型，其实就是普通的JS对象

V：（view） 视图层，就是Dom层，用户看到的页面

VM：（viewModel），传说中的Vue了

原生的交互，其实只有VM，我们需要自己手动写触发事件，简单的例子就是 input值的获取，我们得写个事件触发一下才能获得input里的值

现在有了VM层了，直接帮忙了，实现了数据的响应式，数据一有个变动，自己有更新了，不用再手动加代码写事件了，你说爽不爽~

webapck 包管理器，element-UI轻量还好用

好了话不多说来点干货！

构建项目脚手架 vue-cli

Vue CLI 2的项目构建 可以直接输入 vue init  webpack projece-name

Vue CLI 3的项目构建  create project-name，，

我用的是 Vue CLI 2,更新的好快，看了下官网说vue-cli3优化了挺多，供你快速建项目，待我后面再试试vue-cli3，先用vue-cli2来说了

创建项目

这里我就只说一点就是，npm insall的时候会报错（被这个坑了两个）

第一坑：package-lock.json，这个文件在install之前删除，这个会影响install，报错的

第一坑

第二坑：网络不好导致的报错，让你手足无措。提示的报错信息真的还挺像那么回事的，这个报错的图忘记截屏了，如果项目才建的，install有err，可尝试在网路好的时候install下。

npm安装依赖

npm安装有三点可说，你得注意些！！！

1.npm install + 依赖name

    暂时的安装在本地，package.json里不会添加记录，就是说用这个口令安装的依赖你可以用，但是呢，下次你换个电脑的，安装依赖读取的是package.json里的相关插件信息，这个依赖就不会下载。

2.npm  install + 依赖name  --save-dev

  这个是把依赖填加到package.json里的devDependencies下，这个属性下的依赖属于开发时候的依赖，发布时候用不着的，webpack在打包的时候会把你用到的依赖通过相对应的插件给你打包转换为浏览器可识别的语言压缩在一起的

3.npm install + 依赖name --save

  这个呢就是发布后要用到的依赖，会添加到package.json里的dependencies，类似jquery.js 和 vue.js ,这样的依赖就得放在这个参数下面

综上，下载依赖的时候还是要记得安装在package.json里，避免下次换地方使用项目安装依赖的时候无依赖可查~

package.json

好啦~第一部分就讲这么多了，接下来的文章，我想分享一下项目中sass的使用和如何优雅的将js引入项目~~

唠一句，其实我觉得了解vue的原理还是挺重要的，大多数的朋友喜欢上来就用，不想了解框架是什么原理，觉得能用就行，其实吧也对，但素原理的理解有助于内在对语言的理解，大家肯定是想提升的是内功嘛，了解原理妥妥的提示奥~~哈哈~~我在路上，一起加油啦~

内容若有错误欢迎大家指出，相互学习啦~