vue2.0环境搭建

最近在学习Vue前端框架，初学者就用vue2.0写了一个网站页面，下面是vue项目搭建的一些步骤，记录一下自己的成果。

首先安装node.js

1. 官网：https://nodejs.org/zh-cn/download/
2. 以Windows系统为例，选择Windows安装包，如果是MAC系统，选择macOS安装包即可。
   
3. 下载完安装包后在安装过程中的个性化设置时注意选择add to path。
   
4. 下载完成后运行安装包，一路下一步next就行。然后通过win+R打开cmd命令行，在cmd中输入node -v检查是否安装成功。如下图所示，出现版本号说明已经安装成功了。同时，npm包也已经安装成功，可以输入npm -v查看版本号。
   

安装vue-cli

1. 使用cnpm install -g vue-cli安装Vue脚手架。注意上面安装了cnpm镜像，以后的npm都要改为cnpm。
2. 最后输入vue -V如下图所示即安装成功。
   
   

前端框架搭建

1. 直接使用命令行构建项目。首先，新建一个叫website的文件夹（名字可以任意，地方也可以任意，如在F盘新建），然后打开文件夹在地址栏输入cmd即可直接到命令行界面。
   
2. 输入vue create 项目名即可创建vue项目，然后按回车等待项目构建完成就好了。
   
   
3. 项目构建完成后会发现文件夹下的很多文件，如下所示：
   
4. 在这些文件夹中，只需要关注src文件夹就可以，其他的都是环境配置文件。

框架说明

1. 在刚创建完项目时，src文件夹下只有assets、components、App.vue、main.js文件，assets是用来存放图片的，components是用来写组件的，App.vue是根组件,main.js是入口。
   
2. 有这些项目文件是不够的，还需要路由文件和一个存放代码的文件夹。首先打开此项目，然后在终端输入npm install vue-router 来创建路由，如下所示：
   
3. 如果项目自动生成了router.js文件，需要先删除，手动来写一个router.js。
4. 首先新建router.js文件，然后在main.js文件中添加路由信息，如下所示：
   
5. 写router.js文件之前，新建views文件夹和Home.vue文件，这样代码看起来比较清晰。最后我们打开router.js文件，并写入以下信息：
   
   
6. 到此配置基本完成，在此控制台输入npm run serve后点击链接即可看到空项目的页面
   

代码文件

1. main.js文件是用来配置所需要的环境，用到什么框架，就要在其中添加。以下所有文件是实验室网站的项目文件，给大家示范用（仅供参考）。
   如果要用到框架和组件需查询官方文档，按照官方文档添加，添加步骤为：先在终端npm install 组件，然后在main.js文件下，添加组件信息。
   
2. 在views文件下Home.vue是主页面，就是打开的首页面，在views文件下可以添加任意的页面。实验室网站的页面有四个vue文件，Home是主页面，Honors是竞赛获奖的页面，LaboratoryCompetition是实验室比赛页面，LaboratoryOverview是实验室概况页面。
   
3. 在写完所有的vue文件后，要在router里面配置路由，否则无法实现跳转功能，即无法在页面中显示。因为之前配置的路由仅仅是一个Home页面，我们所写的每一个页面都需要配置路由。配置路由有两种方法：
   a) 在顶部用import from方法，引入这个页面。path填写的是路由，也就是浏览器上面的路径；name一定要和import后面的名字一样；component是最后一步，这个名字也要和上面的import一样。
   
   
   b) 是用路由的懒加载方式，path可以写任意的名字；name写命名的文件名字；component写路径；这种方法不用在前面加import from。
   
4. 如果在此页面要引用components文件下的组件，需要在此页面的vue文件中引用组件。如果某个模块在其他页面中也需要用到时，可将此模块写成一个组件放在components里，可以重复多次调用，减少代码的复杂性。代码如下：
   
   
   在页面写完代码后，在终端输入npm run serve即可运行代码。