Vue笔记(9) 脚手架

学习内容

⊙ 脚手架的介绍
⊙ 脚手架2.x的创建
⊙ 脚手架3.x的创建
⊙ 脚手架3修改配置文件

脚手架的介绍

图片
图片

安装:

npm i -g @vue/cli

安装完以后,如果我们还想用脚手架2功能,就要拉取2.x的模板

npm i -g@vue/cli -init

vue脚手架2初始化项目:

vue init webpack my-project

图片

现在初始化一个2.x版本的项目

图片

这时候会有很多选项要我们确定

图片

我的设置

图片

 然后就自动帮我们生成好文件

图片
图片

真的很强大,直接帮我们都配置好了,webpack的噩梦结束了hhh

脚手架3.x的创建

图片

创建项目:

vue create 项目名称

依旧是有很多东西让我们选

图片

之前我们在脚手架2运行时是用的npm run dev,现在脚手架3用的是npm run serve,可以在package.json里面找到

图片

跑一下试试看:

图片

来看看main.js

  这里的template没有了,变成了render,总之就是使用render更轻量一点,小了6kb,把组件放进去就OK了,这里的mount和el的用法其实也是一样的,只是多了一层判断而已

图片

脚手架3修改配置  

  之前看了脚手架2和3的区别,3的设计原则是”0配置”,所以我们该怎么修改配置呢?
  vue ui

 我们在下载vue/cli的时候他就给我们下载了一个叫vue ui的东西,可以在本地服务上管理配置

  只要在终端敲下vue ui即可

图片
图片

  会自动帮我们打开浏览器

然后导入我们的vuecli3这个项目:

图片

  但是这个有点卡…

点击配置

图片

还可以直接在上面运行

图片

  通过配置文件修改

图片

进入这个文件就可以看到很多配置了

  如果我们还是想自己写一些配置,可以修改文件vue.config.js,到时它会将这个文件和原来的配置进行合并

这章写的不多,因为我想给vue-router写一章,因为他们每一章都比较重要,所以分开写

阅读原文

简介:目前学习前端,欢迎关注微信公众号:睡不着所以学编程
(0)
打赏 喜欢就点个赞支持下吧 喜欢就点个赞支持下吧

声明:本文来自“睡不着所以学编程”,分享链接:https://www.zyxiao.com/p/295842    侵权投诉

网站客服
网站客服
内容投稿 侵权处理
分享本页
返回顶部