小白学vue，vue学习笔记一：使用npm搭建一个简易的vue项目

vue的介绍这里就不再累述了，相信读者朋友们已经从官网上看到了详细的文档。这里只说一下，我开始学vue的一些步骤，仅供大家参考。

接触vue是因为公司要使用vue开发项目，我以前没有接触过前后端分离的开发模型，然后对vue也是只知其名。公司要用，自己又不会，怎么办呢？那就学呗。

一开始，我看vue的官方文档，看网上的一些博客，看的自己是眼花缭乱的，总感觉自己在vue的门外边，疯狂的转圈，总是进不到屋里去。后来，我尝试着自己搭建项目，总算找到了点感觉。

以下就是用npm搭建vue项目的整个过程，记录下来，以防哪天又给忘了。

一、下载npm并安装。这个有点简单，自行百度下载安装即可。

二、使用npm安装vue，vue-cli。自行百度安装。

三、使用vue搭建一个基于webpack的简单项目：

1、新建一个工作空间文件夹，cd到这个目录下。执行 vue init webpack my-project-name 。

2、在安装过程中，有几个英文提示，翻译如下：

Project name ( my-project-name ) // 项目名称，默认回车

           project description ( A Vue.js project ) // 项目描述 ，默认敲回车既可

           Author ( xxxxxx <xxxxx@xx.com> ) // 作者，默认敲回车既可

          Vue build ( user arrow Keys ) // 默认敲回车既可

          Install vue-router？（Y/n）// 安装vue-router？ 敲Y回车既可 （是否安装路由）

          Use ESLint to lint your code？ (Y/n)// 使用eslint规范代码 敲n回车既可

         Set up unit tests (Y/n) // 启动单元测试，敲n回车既可 

         Setup e2e tests with Nighwatch？(Y/n)// 使用e2e测试？

         Should we run `npm install` for you after the project has been created？ (recommended) (use arrow Keys)// 是否安装完成后运行npm install；如果选择否，可以在安装完成后，手动运行npm install ，安装项目依赖。

四、安装过程中，可能会出现chromedriver安装失败的错误，执行cnpm install chromedriver --save-dev 就可以了，具体原因，请自行百度。

五、安装完成后的项目目录：

至此，一个简单的基于webpack的vue项目就已经安装完毕了，下一步要做的就是理清目录结构，自己写组件等等。