【从零开始】vue-element项目（一）

今天突发奇想想从零开始搭建一个vue项目，为什么会有这样的想法呢？

我从开始接触vue到现在已经一年了，但是我从开始接触到现在其实都没有自己完整的做一个项目。要不是半路加入项目组，要不就是在别人的初始框架上进行二次开发，要不就是给别人开发完成的项目擦屁股。所以我想着我从零开始搭建一个Vue项目应该会让我对vue的整体架构会有着更深的理解。

话不多说，让我们开始第一期的开发。

1）环境搭建

Node环境

网上有许多Node搭建的教程，大家自行百度就好，我搭建的时候参考了https://www.cnblogs.com/zhouyu2017/p/6485265.html这篇文章，大家可以看一下。

2）vue脚手架 vue-cli

在Node环境搭建完毕后通过npm安装vue-cli：

npm install -g vue-cli  (之前的)
npm install -g @vue/cli (最新的3.x)

包名称已经从更改vue-cli为@vue/cli。如果您在vue-cli全局安装了以前的（1.x或2.x）软件包，则需要先使用npm uninstall -g vue-cli  卸载它。安装完毕后我们可以在命令行中使用vue --version 确认是否安装成功。

3)创建vue项目

在vue-cli安装成功之后，我们就可以通过脚手架来创建我们的vue项目了，首先通过命令行进入你想要创建项目的目录，然后在命令行中输入vue create project-name ，project-name是你自己定义的项目名称。

vue-cli3.x在创建项目时会提供两种设置，默认设置非常适合快速创建新项目的原型，手动设置提供了更多面向生产项目可能需要的选项。

在项目创建完成过后vue-cli会让提示你怎么运行你创建的项目，首先在命令行进入项目文件夹，然后输入npm run serve 等待项目启动完毕就可以看到vue-cli生成的页面了。

参考：https://cli.vuejs.org/zh/guide/installation.html

4）目录结构

 

接下来就为大家分析一下通过vue-cli生成的项目的一个初始结构，从上到下

1.node_modules用于存放下载的各种依赖包，如果你在创建项目时选择了默认设置那么默认的babel、eslint等都可以在里面找到。

2.public存放了页面的入口 index.html 和标题栏图标 favicon.ico

3.src用于存放各类源代码以及各种资源文件，我们接下来的大部分开发工作都会在里面进行

   assets主要用于存放各类资源文件，比如图片，公共样式。但是也可以自己创建文件夹存放。

   components用于存放公共组件，这也是约定俗成的，当然自己创建文件夹存放也是可以的

   在通常情况下我们还会增加一个名为pages或者views的文件夹来存放页面，当然也可以是其他名字，命名并不死板，但是我们通常都会使用其他人都能看懂的表述，便于他人能够更好的理解你的项目结构。

  App.vue项目入口文件

  main.js 项目核心文件，所有的全局引用都会在这里注册。

4.package-lock.json 是在 `npm install`时自动生成的一份文件，用来记录当前状态下实际安装的各个依赖的具体来源和版本号。

5.package.json 项目配置文件

6.README.md 项目的说明文档

【从零开始】的第一期就讲这些东西，主要就讲了环境的搭建、项目的创建以及项目的目录结构等基础知识点。

如果文章对你有帮助，那会是我的荣幸。