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 样式;