vue(2)学习历程----从iview框架入手

我曾经已经按照vue官网的各种小demo都写了一遍。现在我想做个项目，完整的。我不是专业的前端，写组件恐怕会费很多精力，于是我决定使用iview的组件来完成我的项目。

进行这些之前，我们需要做一些准备工作。

1. 从官网下载nodejs
2. 检验nodejs是否安装成功 npm -v
3. 最好将npm升级到最新版本并全局安装 npm install -g npm
4. 选择速度更快的淘宝镜像并全局安装 npm install -g cnpm
5. 全局安装脚手架 cnpm install -g vue-cli
6. 全局安装webpack cnpm install -g webpack

准备工作完成

---

我会从两个方式进行展开构建和使用

1. 使用官方http://v1.iviewui.com/docs/gu... 提供的推荐工程 iview-project,在快速上手一栏。

   1. 将文件夹下载成功之后，在cmd里，切换到所在路径
   2. 根据其github提示，首先执行命令 cnpm install
   3. 继续执行命令 cnpm run init
   4. 最后执行命令 cnpm run dev 此时自动弹出一个浏览器的iview欢迎页面。

2. 使用脚手架，通过可视化方式搭建我的项目。

   1. cmd切换到要安装项目的路径，创建项目，并写上项目名称 vue init webpack projectname
   2. 进入安装阶段，Project name(projectname) 项目名称(必须小写)，可以指定输入项目名称，也可以直接回车默认用projectname
   3. Project description(A Vue.js project)项目描述，可以直接回车使用默认的
   4. Author 作者,输入你的名字
   5. 接下来有3个选项，字体加粗的是我的选择
      Runtime+Compiler:recommended for most users 运行加编译
      Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时
   6. Install vue-router?(Y/n) 是否安装vue-router 输入Y
   7. Use ESLint to lint your code?(Y/n) 是否使用ESLint管理代码，ESLint是个代码风格管理工具，用来统一代码风格，为了多人合作。
   8. Pick an ESLint preset(Use arrow keys) 接下来有3个选项，字体加粗的是我的选择
      standard(https://github.com/feross/sta... 标准,github有中文版描述
      AirBNB(https://github.com/airbnb/jav... 最合理的方法，githuv有中文版的描述，正是因为它的描述更仔细，所以我选择它
      none(configure it yourself)这个不用说，自己定义风格
   9. Setup unit tests?(Y/n)是否安装单元测试 Y
   10. Pick a test runner 我选择jest
   11. Setup e2e tests with Nightwatch(Y/n) 是否安装e2e测试 Y
   12. 项目搭建好之后，cmd切换到项目目录projectname，输入cnpm install,这条命令是按照项目根目录下的package.json文件中所依赖的模块进行安装，这个文件里面不允许有任何注释，每个使用npm管理的项目中都有这个文件，是npm操作的入口文件。安装完成之后，目录会多出来一个node_modules文件夹，里面存放的是所有依赖的模块。这个文件很大很大，所以大家不会向服务器上传这个文件的。
   13. 安装iview的命令行是：cnpm install iview --save
   14. 测试环境是否搭建成功 cnpm run dev
       命令行提示我：DONE Compiled successfully in 28938ms
       Your application is running here:http://localhost:8081 哈哈成功了哦
       如果你想继续输入的话，那么这个链接会作废的，contrl+c之后，继续输入无论是Y还是N，这个链接都不可以用了，所以建议还是重新打开一个cmd窗口使用命令行吧
   15. 慢慢开发中，我想去掉严格模式，于是把config/index.js里面的dev属性，useEslint设置成false.
   16. 反正目前iview的官方手册有些问题，比如在定制主题一栏，最终我根据iview-theme的github的说明来做，还好成功了。