vue脚手架

1、什么是脚手架(有了脚手架,让你的工程更加稳定,开发更快)

     脚手架也是一个工作平台

   vue 提供了@vue/cli全局模块包,创建脚手架项目,开箱即用!

 

 

2、yarn安装 @vue/cli 

    yarn global add @vue/cli

    安装完成后,可以查看版本   vue  -V

    安装其他全局包: yarn add 包名  -g

 

3、vue 创建脚手架

   vue  create vue-demo   # 不能出现大写字母

  选择  vue2 的版本

  选择   use yarn

  cd  目录

  yarn serve  启动服务

 

4、脚手架文件的说明

 

 

 

5、主要的三个文件及关系

 

 

 

 main.js , App.vue 和index.html 有什么关系呢?

  main.js  - 项目打包主入口 - Vue  初始化

  App.vue  - Vue 主入口

  index.html  - 浏览器运行的主入口

 App.vue  => main.js  => index.html

 

6、开发服务定义配置

    根目录新建  vue.config.js

   更改端口及关闭es_link检测

 

 

 

7、单文件讲解

   template 只能有一个根标签

  scoped 只针对当前页面有效

 

 

 

8、清空脚手架欢迎页面

     1、清除App.vue 内容 因为它引入了helloword.vue  ,重新搞个默认模板就行

     2、删除compent 里面的helloword.vue 组件

    3、删除asset 里面的log

 

posted @ 2022-06-25 14:31  JakeTan  阅读(62)  评论(0)    收藏  举报