文章目录
- 一、环境
- 二、创建项目
- 三、启动项目
- 四、项目结构与解释
一、环境
环境已经搭好，所以就不废话了，看一下我的版本
这已经是最新环境了。
二、创建项目
我们使用命令vue create创建，如下：
vue create v1
提示说：请选择一个预设，预设就是项目的一些初始化，就是给你安装规定一些基本的东西，以前的低版本vue创建项目是用vue init webpack 【projectName] 命令，现在我们有了vue create，不再使用vue init了。
这里我们选择默认（Default（[Vue 3]）babel, eslint）。
复杂的创建项目，请参考《VueCLI v4.5.4 创建vue项目（手选模式创建）》这篇文章。
回车等不到一分钟，很快就创建好了，如下：
三、启动项目
项目创建好后，进入项目目录，运行命令
npm run serve回车，启动项目…，也就很快，启动了，如下图示：
此时我们访问浏览器输入：http://localhost:8080/，进入项目，如下：
从此，可以开始你的装逼表演了。不过在写代码之前，应该了解一下项目结构，这样做是为了更好的理解工程架构，我看过一些前端项目，写的真让人头晕，没有犯规，该放的文件不放，不该放置的就随便放，真让人不爽快，了解项目结构的意识就是这里了，为了让项目看起来很容易阅读，代码清晰，因此又不要了解，而且了解结构就是第一步，必学的基础。
四、项目结构与解释
一下是项目所有文件：
序号 | 类型 | 文件 | 作用 |
1 | 文件夹 | node_modules | node模块,每一个文件夹都是一个模块整体，意思相当于java的第三方jar，也就是所谓的依赖包一样的作用 |
2 | 文件夹 | public | 公用的文件，没有权限都可以访问的页面和图片，以及js代码等资源都放在这里面 |
3 | 文件夹 | src | 存放项目源代码，src最熟悉不过的单词了，我们的起航就从src开始，接下来写的代码和资源大部分都在里面 |
4 | 文件 | .gitignore | 忽略文件，比如你将项目上传到gitee、github、svn等服务器，那么有些是环境文件，或者是配置文件，每一个开发者都不断的变化，所以没有必要识别更新，所以不需要上传，也就选择了忽略 |
5 | 文件 | babel.config.js | babel配置文件，Babel是一个JavaScript编译器，主要用于将采用ECMAScript 2015+语法编写的代码转换为向后兼容的JavaScript语法，以便能够运行在当前和旧版本的浏览器或其他环境中。vue项目中普遍使用es6语法，但有时我们的项目需要兼容低版本浏览器，这时就需要引入babel插件，将es6转成es5。 |
6 | 文件 | jsconfig.json | js配置，主要是项目的编译选项配置，告诉编译器，代码在哪，资源在哪等 |
7 | 文件 | package.json | 项目依赖包和项目名称等 |
8 | 文件 | package-lock.json | |
9 | 文件 | README.md | 项目自述文件，比如说，项目怎么安装，怎么启动，怎么打包，都使用了什么插件等信息 |
10 | 文件 | vue.config.js | vue的配置文件 |
