Vuejs笔记--vue介绍和项目构建

前言：本篇文章主要针对新手，说明如何创建第一个vue的项目。如果说你对vue丝毫不了解，可以看下这篇文章，看下vue的优势和用途以及如何构建一个vue项目。

一 vue的优势和缺点：

• vue是一个构建数据驱动的web界面的渐进式MVVM框架。
• 优点：A:性能好;B:简单易用;C:前后端分离;D:单页面应用用户体验好;
• 缺点：A:封装的比较厉害，报错不明显;B:适合单人开发，适合中小型项目,对于协同开发会比较吃力，代码管理难度大。

二 环境支持
1.nodejs：从官网下载使用于你自己的系统的安装包直接安装即可，安装完成后代码cmd控制台，输入node -v，即可出现版本号，若出现及代表安装成功。

2.npm：npm库管理工具在node安装好后自动携带，打开控制台输入npm -v查看版本确认是否存在即可

3.全局安装vue-cli：npm install --global vue-cli（或者 npm i vue-cli -g）

至此完成了关于创建一个vue项目的环境支持。下面开始具体的项目构建
补充一下关于vue-cli不同版本的安装和卸载（版本不同，目录结构不同）

// 全局安装3.0以下版本指令
npm install vue-cli -g
// 全局安装3.0以上版本指令
npm install -g @vue/cli

// 卸载现有版本 -g表示从全局卸载
npm uninstall @vue-cli -g

// 查看安装版本
vue -V

三 构建步骤
打开cmd控制台，定位到你需要创建工程的目录下，在控制台中输入vue init webpack project
(project表示你的项目名称)。
下图展示了初始化一个vue项目的必要设置。图中的乱码不用担心，是git克隆地址的显示问题。

• Porjcet name – 可以自己设置，默认是你初始化指令的project
• Porjcet description – 是对工程的描述，自定义
• Author – 作者 自定义
• Vue build vue – 的构建模式，可选 standalone （另外的模式可以根据自己的需要）
• Install vue-router? – 是否安装vue路由定位 yes
• Use ESLint to lint your code? – 是否开启代码检测 yes
• Pick an ESLint preset – 以标准模式添加代码检测 yes
• Set up unit tests – 是否创建测试（要不要无所谓，我选择no）
• Setup e2e tests with Nightwatch? – (要不要无所谓，我选择yes)
• Should we run npm install for you after the project has been created? – 以yarn和npm两种方式进行初始化，默认使用npm，我选择npm

在选择初始化模式后开始进行初始化操作。最后完成的效果如下图

可以看到开始运行的指令为两步，第一步为定位，第一步运行。运行效果如下图。


以上就完成了第一个vue项目的构建。

四.文件结构
我们打开项目目录发现，在project文件夹下的文件结构如下图所示。

• build和config文件夹负责环境配置
• src是核心，大部分代码都在此处编辑
• static存放静态文件
• .eslintrc.js是代码检测规则文件
• package.json是对所依赖包的说明