day2-vue脚手架搭建

vue脚手架搭建方法

vue脚手架主要有两种常见方式进行搭建：

1. vue create 项目名称
2. vue init webpack 项目名称

通过上面这两种进行搭建，都需要对vue进行全局安装。使用以下命令：

npm install -g @vue/cli-init

两者的区别主要有下：

• vue-create是vue-cli3.x的初始化方法，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与vue-cli2项目结构不同，配置方法不同，具体配置方法参考文档链接。
• vue-init是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录（如果修改了配置，可以查看文档，用cli3的方法进行配置）。

现在vue脚手架版本号已经更新到4.x版本以上了，所以用哪个方法创建呢？
其实这边旧版@vue/cli4.x与旧版@vue/cli2.x使用了相同的vue命令。
旧版的命令被覆盖了，所以不做处理是用不了的。
如果想继续使用需要全局安装以下命令，这样就可以继续用旧版的vue命令了。

在config文件夹下面的index.js文件中，有一个配置是autoOpenBrowser：false，说明运行后浏览器不会自动打开，
如果需要自动打开，只需要将false改为true。

src目录中有一个components目录，里面都是放组件的。

• 组件：多个功能组成的一个集合，里面包括html模板、js代码和样式
• 组件化：一个页面会有很多很多功能，每一块是一个组件，那么会出现多块，就是组件化
• 模块：一个js文件就是一个模块
• 模块化：多个js就是模块化

组件的style中：

一般会有scoped：范围。如果父级组件和子级组件中都没有这个属性，那么子级组件的样式有可能会影响父级组件。

组件的js中：

name是描述当前这个组件的名字
数据都在data这个函数中的return后面的对象中书写

打包文件

命令：npm run build

运行打包文件

命令：serve dist