Vue组件化入门详解

init文件

首先创建文件，在终端进入该文件目录下,输入

vue init webpack vuetest

这一步实例化一个Vue构造函数，会执行Vue的init方法，在init方法中只要执行三部分，一是初始化环境变量，而是处理Vue组件数据，三是解析挂载组件。

根据自己要求安装

image.png

最后会出现一=一个地址，这个地址不是上线地址，而是Vue调试地址，上线的话还有执行打包

image1.png

执行上述文件时会自动生成下列文件夹，src文件里面放置未打包之前的文件，src中assets文件夹存放需要打包的文件，component文件存放各种组件

image2.png

如果最后文件写好需要打包，执行命令

npm run build

执行之后会自动生成一个dis文件，如果文件不需要打包，可以把文件放置在static文件里面，例如JQ文件，但不打包的文件就需要引用，static里面有个.gitkeep文件，这个文件是防止文件打包上传到github时避免被过滤掉，因为如果是空文件，是传不到github中的。

image4.png

如下图所示，我们需要的JQ文件不需要打包的话就需要在index.html文件头部引入，index.html是Vue的进入口

image5.png