vue初创项目文件结构介绍、运行

前言

如果你还没利用vue-cli创建一个vue项目，请先创建再看本文章
点击跳转教程

本文是通过yarn创建的vue项目，如果是npm命令会有些不同。

创建一个vue项目

打开vscode，打开终端，输入vue create demo，会有提示选项

这个提示是让你选择，Default([Vue 3] babel,eslint)默认搭建的是Vue 3结构，Default([Vue 2] babel,eslint)默认搭建的是Vue 2项目结构，Manually select features意思是自定义，这里我们通过上下键选到Manually select features，然后回车进行选择，会出现如下提示，将分别进行介绍。

Bebel：解析最新js语法的工具，以及一些较超前的js语法语句，把浏览器不认识的语法转换成浏览器认识的语法。
Typesscript：js的超集，即解析js语法，还能解析其他语法
Progresssive Web App (PWA) Support：增强式的webapp。如今手机app大致分为三种：
1、源生app，即用Android或ios写的。
2、webapp，即用html+js+css写的，优点是开发周期快，缺点时不能调用手机权限，如访问手机通讯录，打开照相机等。
3、混合式app，即主要用html+css+js写的app，但是通过插件的形式弥补了webapp无法使用手机权限的问题，优点是开发周期快，且能够调用手机权限，但不及纯属用Android和ios写的app稳定，就比如玩游戏，为了追求游戏的稳定性，如不卡顿等等，都还是会首先Android和ios进行开发，但混合式app也并非不受欢迎，如淘宝等也算是混合式app。就如同在手机app打开页面有点像在用浏览器打开，只是不显示地址栏，且可以使用手机权限。
Router：路由，node里的路由是控制所有的接口，但是vue里面的路由是控制显示的内容。
Vuex：组件之间有时候需要传递数据，可以管理所有组件共同的数据。
Css Pre-processors：预处理语言，如less和sass。
Linter / Formatter：格式化文档
Unit Testing：待补充
E2E Testing：待补充

在这里选择，通过上下键控制箭头指向，通过空格选择是否选中，选完回车即可创建项目。对于初学者来说，仅需选择Babel回车即可。
然后再选择2.x

具体看你对vue掌握多少而选择。

再选择 In package.json：

输入y

再回车

等待下载完毕

vue文件结构介绍

知识点：
vue-cli创建的项目叫做单页面应用，spa
什么叫单页面应用？就是整个项目只有一个页面。
如何在一个页面看起来是多个页面显示？都是在这一个页面里去替换不同的组件去达到多页面显示的效果。

node_modules：装所有模块的文件夹

---

public：

index.html：
前面也说到vue创建的项目是单页面应用，就是整个项目只有这一个html页面，即index.html。

favicon.ico 项目页面的图标 ，就是图中红框框内的

补充知识点：
项目页面图标可以在前端配，也可以在后端配，后端配页面图标：点击查看

前端配置（创建好项目后可以相应打开index.html看一看）：

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

<%= BASE_URL %>：变量地址，<% %>是模板字符串，BASE_URL放变量。

也正是因为是单页面应用，所以在public一般只放这两东西，其他都不变，除非可以把默认的页面图标favicon.ico该一下

---

src：所有项目都在src里面写，其他基本不动 ，即这里才是写代码的地方。

assets ：这里面放资源，如image、fonts等。
component：放组件的，一个组件即是由html、js、css组成的。
xxx.vue：
以.vue结尾，由三部分构成：
template 写html结构的
script 写js的
style 写css的
App.vue：根组件，可以由多个小组件构成。
main.js ：主入口js文件，即最先加载的文件。

---

.gitignore ：配置这个项目里面哪些文件不上传，例如node_modules不上传。

---

babel.config.js：配置babel的。

---

jsconfig.json：babel解析js的配置。

---

package.json：项目的工程文件，可以看到相应版本（大的模块版本）

---

readme.md： 记录你操作指令的文件。

---

vue.config.js：配置vue-cli脚手架的

---

yarn.lock/package-lock.json：小的模块的版本记录（或者说依赖，小东西的依赖，好找对应的版本号）

---

运行vue项目

1、进行demo文件夹

2、提供两种运行方式：

如果是yarn下载可选择这个：    yarn serve
如果是npm下载可选择这个：     npm run serve

4、等待创建，直到显示这个为止

5、打开浏览器，上图地址，随意输入一个即可。

6、运行成功