npm方法创建一个vue 项目，并引入element插件

今天摸索着开始利用NPM方法创建自己的第一个Vue项目，一切还算顺利，今天把自己创建的过程给记录下来，分享给各位小伙伴，嘻嘻！！！

1、搭建Vue.js的环境

大家可以参考这两篇博文：hi_shepherd 和 前端伊始 两位小伙伴的博文，笔者检验有效。

tips:这里简单记录一下创建好的工程中各个文件夹和文件的含义：

所有需要require的文件，没有./这个的话，都去node_modules文件夹里找
@表示自定义的根目录
1.build-[webpack配置]
主要启动文件是webpack.dev.conf.js
当我们输入npm run dev时候，首先启动的就是这个,它会去检查node和npm版本，加载配置，然后启动服务

2.config-[vue项目配置]
项目相关配置：主要是指定开发和打包中的静态资源路径、要压缩的文件类型、开发使用的端口号、开发使用虚拟服务器跨域请求 api 等。
主要是index.js，当端口冲突时配置监听端口，打包输出路径及命名等

3.node_modeles-[依赖包]
项目依赖库，也可以自己按需要添加其它依赖：cmd。。 进入项目。。npm install 包名称

4.src-[项目核心文件]
assets:放置静态资源，包括公共的 css 文件、 js 文件、iconfont 字体文件、img 图片文件 以及其他资源类文件。之所以强调是公共的 css 文件，是因为要在组件的 css 标签里加入 ‘scoped‘ 标记，避免污染全局样式；
components:放置通用模块组件。项目里总会有一些复用的组件，例如弹出框、发送手机验证码、图片上传等。
main.js-[入口文件]：主要是引入vue框架，根据组件以及路由设置，并定义vue实例
router文件夹下的index.js设置路由，用于绑定自定义的vue文件等

5.static-[静态文件：图片，json数据]

2、引入element-UI组件

“前端伊始 ”小伙伴也介绍了引入element-ui的方法，但对于我这种第一次玩耍vue的小孩来说，着实走了一步弯路，下面笔者也记录一下亲自实验的步骤：

2.1 笔者将项目创建在了桌面上，如图所示

2.2 打开命令窗口（运行->cmd->确定），在DOS窗口中输入：cd   C:\Users\Administrator\Desktop\vue_project ，然后回车

这个时候命令提示符已经转到 vue_project 项目中，用Visual Studio Code（其他的IDE也可以）加载 vue_project 项目。

2.3 在命令窗口继续输入命令： cnpm install element-ui -S，然后回车。

2.4 得到如图所示的结果就算成功了，当然也可以查看项目文件：vue_project->package.json，

 "dependencies": {
    "element-ui": "^2.7.0",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },

文件中有如图的代码就说明配置成功了。