使用Vue-cli3+Browserify搭建Vue项目

由于之前一直使用React，打包使用Browserify，而Vue却偏爱使用webpack，但是没有什么是必须的，Vue官网也提供了browserify版本的快速模板，通过cli脚手架快速生成。

第一次学习使用Vue，没办法，公司技术栈是Vue，只能硬着头皮学了。

本文使用的包管理是yarn。

首先安装脚手架：全局安装哦，这里装的是3.+，如果你安装的是2.x的，没法直接使用create 命令生产模板

初始化

yarn init

yarn global add @vue/cli

移除旧的脚手架：

yarn global remove xxx

查看全局包

yarn global list

查看vue命令是否可以使用

Vue --version

创建browserify的模板

vue init browserify-simple xxx项目名

​

yarn install

项目目录出来了：dist是打包生成的最终文件，不用管暂时，Public是主页面html,你可能发现没有bundle.js或者别的js，因为脚手架打包后自动注入js到dist里的文件。

看一下打包后的index

​

然后看一下src：这里是我们开发的地方，Vue单独把App.vue独立出来，components是存放组件的地方，和React差不多，不过脚手架很方便的帮我们处理好了。

作为一个Vue小白，看到这个结构，很有趣，Vue将html，css，js，直接放到一个页面中。

css还提供了作用域。

组件的写法是对外暴露出一个对象，生命周期函数与属性都是在这个对象里，而React是基于Class来生成组件的（Function纯组件除外），这点有很大区别，并且，React内部可以维护一个State，但是Vue的数据并不是如此，而且实际开发过程中，发现，Vue不能直接响应数组索引赋值的变化，视图层不会变化，不过官方给了解决方法。

​

运行这个项目

yarn serve

yarn build

Vue创建browserify项目结束。