Vue学习笔记(一)——搭建自己的Vue项目及框架结构解释

好久没有学习了，最近也是搬到了一个新的城市，要面临租房子，找工作等一系列问题，所以学习也被耽误了一段时间，这周末就来简单学习一下Vue吧。学习Vue的原因是因为面试的时候有一家公司问我会不会Vue，我说我会使用，但是没有自己的前端项目，就直接被过滤了，所以觉得还是一点点学习一下Vue，然后自己再做一个简单的项目才会对以后的工作所有帮助，好啦，正式开始学习。

创建一个Vue-cli项目

1.安装配置node.js

node.js下载官网地址

单击下载

 下载安装包之后直接进行傻瓜式安装，按照默认配置就可以，如果有需要可以将文件位置更换成你希望的位置。

安装完成后我们打开命令行，通过命令查看nodeJs是否安装成功。

node -v

 npm -v

 如图所示，nodeJs我们就安装成功了。

成功安装之后我们还需要安装淘宝镜像加速，有两种方式：

# 全局安装cnpm命令，使用cnpm命令时使用淘宝镜像加速
npm install cnpm -g
 
# 每次使用npm install命令时，添加--registry参数进行单次加速
npm install --registry=https://registry.npm.taobao.org

全局安装cnpm成功

2、安装Vue-cli

# 安装Vue-cli
npm install vue-cli -g

安装成功

# 下载之后我们此命令查看可以使用哪些模板去创建Vue项目
vue list

 显示如下图，通常我们选择webpack(使用webpack是因为Vue采用的是ES6的语法规范，但是目前全浏览器使用的还是ES5的规范，所以要i使用webpack将Vue项目变为ES5规范的项目，保证浏览器的兼容性)

 好，到这里我们需要的环境就都安装完毕了，接下来我们就要创建Vue项目了。

3、创建第一个Vue项目

首先我们在自己喜欢的目录下创建一个文件夹，用来存放Vue项目。

 创建文件夹之后，我们在此文件夹中打开命令行工具，进行Vue项目的创建。(要注意的地方有：我们使用如下命令时要在我们新建文件夹的路径下，其次我尝试了使用PowerShell发生了无法运行脚本的错误，个人没有纠结，而是直接换了cmd手动跳转到Vue目录的，如果你在初始化的时候发生了类似的错误，请参考我的情况)。

 我们输入命令后会有一些配置需要我们选择，我们进行如下选择

由于需要学习所以所有配置我们需要自己进行配置。

接下来我们再次访问我们创建的Vue文件夹，就会出现我们构建好的Vue项目。

 此时我们的Vue项目就创建好了，初次创建的时候我们还需要执行一个命令。

# 下载项目需要的依赖包
npm install

安装完需要的依赖包之后，我们就可以通过如下命令进行启动了。

# 项目启动
npm run dev

启动后我们访问http://localhost:8080/就会跳转到此页面，此时我们的Vue项目框架就算是搭建好了。

 通过Ctrl+C进行项目终止。

我们如果要对前端项目进行开发的话，需要使用一个编辑器，这边说几个主流的编辑器吧。

IDEA

分为企业版和社区版，默认是无法识别Vue文件的，所以导致Vue文件是如下样子的

 纯文本的显示会给我们的开发增加很大的压力。

企业版的小伙伴们(包括破解的)可以下载一下Vue.js插件，通过插件去识别，CSDN也有这种教程，但是我用的是社区版的，没有找到这个插件，所以我改成使用VsCode来开发了，顺便介绍一下VsCode的下载安装过程哈。

VsCode下载与安装

VsCode官网

一般都是Windows环境，所以我们选择下载这个(下载特别慢，如果有需要可以私聊找我要安装包哈)

同样是傻瓜式安装，并且安装过程的语言都是中文，稍微仔细看一看即可。

安装之后我们通过此按钮找到Vue项目并打开，过程中会询问我们是否信任该文件夹，信任就好啦。

 我们导入文件以后此时Vue文件还是不会被识别，我们需要下载一个插件。当我们打开Vue文件的时候VsCode会自动提示我们去下载插件，如果没有提示的话，我们需要下载一个插件，如下图(Vue Language Features)：

 此时我们的Vue文件就可以被识别了，下图为识别后的样子：

 Vue文件目录结构

 我们可以在config -> index.js 文件中进行项目启动端口的修改。

 调用关系如下：

我个人认为就是将vue文件(此时是HelloWorld.vue文件)作为一个组件，等待需要使用的文件(此时是App1.vue文件)进行导入，导入后再整合自身页面需要展示的内容形成一个完整的需要展示的页面，然后再将此文件(指App1.vue文件)封装成为一个独立的Vue对象(在main.js文件中封装生成)，生成后在html页面(此时指index.html文件)中通过选择器，将id与封装的vue对象名称相同的页面对象取出并进行展示。

这就是Vue框架的基本使用方式，除此之外我们还要开发我们自己的页面，以及进行各种数据的传输，还需要进行后端接口的调用等等内容需要学习，任重而道远啊。。。