快速创建vue工程——学习笔记

接触到的新项目前端使用的是vue，因此已经搞了两周了，总结下自己的学习成果。

基础入门

通过项目上的培训文档入门的，这点就不多说了，基本的东西网上也可以搜索到，推荐两个网址吧：
1、https://www.runoob.com/vue2/vue-events.html
2、https://cn.vuejs.org/v2/guide/
重点掌握语法和vue的生命周期。

自己动手搭建vue

1、需要在自己的电脑上安装node.js，这个很简单，官网下载安装包直接下一步下一步就可以了。
2、配置环境变量：右键此电脑——>选择属性——>选择高级系统设置——>选择环境变量——>点击系统变量中的Path——>点击编辑，将node的安装路径配置进去。

注意：此处尽量使用安装版的node.js，使用解压版的可能会导致vue安装不上。
3、安装vue，找到上面安装node的根目录，在此目录下打开命令窗，也可以在别处打开命令窗进入到此目录下面，这样是为了方便将vue和node安装在同一个目录下。
在这里踩过坑，刚学的时候打开的命令窗当前路径是桌面，执行vue的安装命令之后直接将vue安装在了桌面上，喜欢电脑整洁的一定要找一个自己规划好的目录
4、执行命令，官方给的命令是：npm install vue，但个人尝试过之后感觉只执行下面的命令就可以了，如果不可以，再执行npm install vue也行。

npm install --global vue-cli

5、安装好之后记得使用如下命令进行验证。

node -v
vue -V

注意vue的V是大写的V。

6、环境搭建好之后就可以直接使用命令生成一个新的vue工程了。

vue init webpack 项目名

之后会依次询问如下问题（可能版本不同询问的问题不一样，但主要的应该相同）：
Project name：项目名称，如果刚才的命令中已经带了项目名称，直接回车就可以了。
Project description：项目描述
Author：项目作者
vue build 构建方式

两个选择（上下箭头选择，回车即为选定）
1.Runtime + Compiler:recommended for most users
(译：运行+编译：被推荐给大多数用户)
2.Runtime-only:about 6KB lighter min+gzip,but templates (or any Vue-specific HTML) are ONLY
allowed in .vue files-render functions are required elsewhere
(译：只运行大约6KB比较轻量的压缩文件，但只允许模板（或任何VUE特定HTML）。VUE文件需要在其他地方呈现函数。翻译不精准，意思大概是选择该构建方式对文件大小有要求)
这里推荐使用1选项，适合大多数用户的

Install vue-router?：是否安装路由？
Use ESLint to lint your code?：是否使用ESLint检测你的代码？
Setup unit tests?： 是否安装单元测试？
Setup e2e tests with Nightwatch(Y/n)?：是否安装E2E测试框架NightWatch（E2E，也就是End To End，就是所谓的“用户真实场景”。）
ESLint、单元测试和E2E我都没有用过，有兴趣可以试试。
Should we run ‘npm install’ for you after the project has been created?：项目创建后是否要为你运行“npm install”?这里选择包管理工具

选项有三个
yes,use npm(使用npm)
yes,use yarn(使用yarn)
no,I will handle that myself(自己操作)

这里我选择的是第一个，使用npm。
选择完之后就会自动生成一个vue工程并自动执行npm install命令安装相关依赖。
下图是命令执行完之后的截图：


可以看到上图最后有提示，执行npm run dev就可以运行项目了。
7、在命令窗打开创建工程的根目录，执行npm run dev命令，打开命令窗口给的url，就可以验证自己的工程是否安装成功了

了解目录结构

对于目录结构这块理解的还不是透彻，还需要后续继续学习。各种配置还不太了解怎么配置。

引用组件，方便开发

由于项目中使用的是封装好的组件，使用起来非常方便，因此我上网查找了几种可以直接拿来用的组件，选来选去感觉都没有项目中的组件好用，但是项目中的组件属于公司的，不能拿来分享。
找来找去选了一款View UI的组件，感觉用起来还是比较方便的，容易上手，API详细。
地址：https://www.iviewui.com/docs/introduce
推荐大家尝试尝试。

最终将工程部署在nginx上

在项目根目录执行下面命令，可将工程打包成一个dist的文件夹：

npm run build

我这里使用的window上安装的nginx，比较简单，直接到官网下载nginx安装包安装即可，安装完成之后，找到conf目录下的nginx.conf文件，按照如下图进行配置：

到这里，基本完成了一个工程的简单创建，当然还有很多细节性的东西，路由的配置、生产、开发环境的配置以及在nginx配置多个工程等还没有学习完。