从0到1构建极简Vue项目

注意
本文默认读者掌握了一定的前端知识，如果你对前端知识一无所知，请先自行查看前端的三大知识点（HTML + CSS + JavaScript），而后再回来继续。

要搭建Vue项目，我们需要使用一个工具CLI。CLI需要Node.js环境，我们使用的包管理工具是npm，如果Node.js和npm没有安装，请先行安装。如已经安装，那么我们继续。请打开Mac(注意这里的演示使用MacOS系统)的Terminal，输入如下命令：

1	$ npm install -g @vue/cli

安装完成后，键入如下命令查看是否正确安装：

1	$ vue --version

已安装完成会显示Vue的版本信息，比如：3.4.0。

创建一个存储项目的目录文件夹（VueProject–目录名，可自行定义）并进入该目录：

1 2	$ mkdir VueProject $ cd VueProject

输入如下命令初始化项目(hello-world为项目名，可
自行定义,当然，该项目名最终也会生成一个文件夹，内部为项目相关文件)：

1	$ vue create hello-world

会出现一个选择项：Please pick a preset：，直接回车默认default（babel,eslint）安装项即可。等待一分钟左右，项目即构建完成。整个项目大概113.3M左右，不用担心，多是一些开发环境需要用到的依赖包，将来发布到线上的包一般只有几兆而已。

目录结构：
Alt text

随便翻翻，了解一个Vue项目的基本目录结构，package.json里面是项目依赖包的信息及版本号。

最后一步，进入我们刚刚创建的项目，启动服务器编译运行：

1 2	$ cd hello-world $ npm run serve

启动完毕，会给出访问地址提示，如：

1
2
3

App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.4:8080/

打开浏览器，分别输入本地地址（http://localhost:8080/ ）或网络地址（http://192.168.1.4:8080/）皆可访问。

至此，一个极简的Vue项目搭建完成，Vue CLI是一个基于插件的体系结构，使得它非常灵活且可拓展，可以根据自己的需要安装对应插件。接下来就是更深入的需求定制，可通读Vue CLI的官方文档，熟悉更多项目搭建的细节，不要急，一步一步来，链接如下：
Vue CLI（英）