[JavaScript知识库]vue脚手架文件及组成介绍

1. vue脚手架创建项目

使用vue create demo? 创建demo文件夹储存vue项目；

选择完配置选项后，使用npm run serve将项目跑起来；

2. 项目文件作用夹介绍

node_modules：下载的第三方包的文件

public：静态文件资源文件夹，默认主页面index.html、icon等都在其中；

src：开发项目的项目文件

2.1 src文件夹中文件介绍

assets：项目开发使用的资源放在该文件下；

components：复用的组件创建在文件夹下；将整个页面分为若干份；每一个文件是一个组件；

router：路由对象配置文件夹；index.js文件中创建路由器对象，设置路由匹配规则；

views ：路由页面，跳转显示；可以理解为一个页面级别的组件，router-link或者使用this.$router.push()跳转；一个组件渲染一整个页面；

app.vue 根组件

main.js ?入口文件：创建根组件对象

3. 设置路由匹配规则；

1.?import HomeView from '../views/HomeView.vue'? ; 直接再匹配对象中使用component: HomeView；????????直接在文件最前面导入,在组件配置对象里面使用component属性设置组件名；

2 .?component: () => import('../views/HomeView.vue')????????在路由配置对象 component属性再通过import方式导入;

相比较于第一种，直接再进入页面时候加载全部的组件，第二种不用一次性加载所有的路由页面，需要的时候再去加载对应路由页面，这种方式就是路由懒加载；

4. App.vue的注意事项

App.vue 中的style样式是一般全局样式，这里面设置样式可以影响到其他组件的样式；除了App.vue文件,以后其他组件的样式都要去使用样式隔离；样式隔离：在style标签里面添加scoped进行样式隔离;

一般来说：一个后缀名为.vue文件的就是组件,这样的组件又称之为单文件组件,该组件包含三大部分：template 页面模板结构、script 组件业务逻辑、css 样式；