Vue学习随笔一初始化

Vue最近火的一塌糊涂&＃xff0c;之前靠着年轻时候学过的一点jQuery皮毛&＃xff0c;一直在勉强坚持做着前端的一些工作&＃xff0c;个人水平不够&＃xff0c;不是说jQuery不好。但是想到年纪大了的人也要与时俱进&＃xff0c;故&＃xff0c;乘着项目空闲期&＃xff0c;试了一下 VUE 和 Kotlin (java开发技术&＃xff0c;在后续的文章会涉及)。这里&＃xff0c;我略过那些VUE怎么高大上&＃xff0c;怎么颠覆这个那个的描述&＃xff0c;直接记录我学习的过程。

1. 环境准备

　　windows系统&＃xff0c;下载了最新版的Node.js&＃xff0c;直接安装&＃xff0c;配置 Node_Home 和 PATH&＃xff0c;然后用 npm 安装 vue 以及vue-cli &＃xff0c;npm慢的话可以安装 cnpm&＃xff0c;网上很多资料。。

2. 开发工具选择

　　web开发的热门工具有vscode、sublime、webstorm、hbuilder等等&＃xff0c;我下了这几个都试了一下&＃xff0c;包括最新的HbuilderX&＃xff0c;可能是习惯了IDEA的操作习惯&＃xff0c;选择了webstorm进行开发&＃xff0c;下载最新版即可。

3. 第一个项目

　　可以使用CMD命令行进行项目的初始化&＃xff0c;然后再用IDE导入&＃xff0c;这里选择了IDE直接新建项目作为记录。打开webstorm&＃xff0c;new project&＃xff0c;选择 VUE.js&＃xff0c;键入项目路径和名称&＃xff0c;我这里是 vuedemo&＃xff0c;如图&＃xff1a;

　　然后一路的 next &＃xff0c;

　　这里的vue-cli(脚手架)&＃xff0c;会初始化项目&＃xff0c;下载一些依赖的js库&＃xff0c;视网络速度&＃xff0c;有快有慢。。。然后成功后会让你输入project name &＃xff0c;这里我看了&＃xff0c;是对应的vue 初始化项目的 html title&＃xff0c;还是输入vuedemo即可。

　　后面会让你输入项目描述、作者信息&＃xff0c;值得关注的是 Install vue-router&＃xff1f; 以及 Use ESLint&＃xff1f;和 Set up with tests&＃xff1f;等等&＃xff0c;我都是选择的 “Y”进行项目初始化。后面会一个个的解释。项目新建成功后&＃xff0c;webstrom会进行一些处理&＃xff0c;见右下角的圈圈&＃xff0c;这时候来一杯咖啡稍等即可。。。

　　项目的初始结构是这个样子的&＃xff1a;

　　其中&＃xff0c;build目录是VUE编译以及初始化的一些文件&＃xff0c;config目录是一些全局设置&＃xff0c;以及各个环境的个性化设置文件。src。。。源代码&＃xff0c;static。。。静态文件&＃xff0c;test。。。测试代码。根目录下的文件&＃xff0c;目前需要关注的是 package.json &＃xff0c;这个文件跟 java 项目的 build.gradle 文件一样&＃xff0c;描述项目的名称、属性、依赖js库等信息。后续会详细解释。

　　好了&＃xff0c;现在点击右上角的 Add Configuration 按钮&＃xff0c;出现下图&＃xff0c;配置一下即可&＃xff1a;

　　这时候直接点击 run  是会报错的&＃xff0c;需要在CMD进行 cnpm install 安装。。

　　等待安装好&＃xff0c;项目会添加 nude_modules 目录&＃xff0c;存放的是依赖的JS库&＃xff0c;就像java依赖的maven库一样&＃xff0c;然后直接run。

　　点击链接&＃xff0c;浏览器会打开一个默认页面&＃xff0c;此时&＃xff0c;项目新建就成功了。