Solo  当前访客:0 开始使用

布丁与画家的博客

努力改变一小部分人解决问题的方式

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

2019-08-20 07:23:41 iwh718
0  评论    0  浏览

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

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

本文使用的包管理是yarn。

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

初始化

yarn init

null

yarn global add @vue/cli

null

移除旧的脚手架:

yarn global remove xxx

null

查看全局包

yarn global list

null

查看vue命令是否可以使用

Vue --version

null

创建browserify的模板

vue init browserify-simple xxx项目名

null

null

yarn install

null

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

看一下打包后的index

null

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

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

css还提供了作用域。

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

null

运行这个项目

yarn serve

yarn build

null

Vue创建browserify项目结束。


标题:使用Vue-cli3+Browserify搭建Vue项目
作者:iwh718
地址:看看我的CSDN

web站点:骇客猫科技资讯



今日诗词
QQ交流群:914105779

标签

友链

存档

TOP