Vue Cli

显示全部楼层 · 2019-9-12 16:22:09

Vue CLI 是一个基于 Vue.js 举行快速开发的完团体系，Vue CLI 致力于将 Vue 生态中的工具底子标准化。它确保了各种构建工具能够基于智能的默认设置即可平稳衔接，如许你可以专注在撰写应用上，而不必花好几天去纠结设置的题目。与此同时，它也为每个工具提供了调解设置的灵活性。
概念

通俗的说，Vue CLI是我们创建大型项目时的脚手架，所谓脚手架，就是帮助我们建立好了制作大厦的所需模板，建立者只需往模板内里填入实质内容，即可完成大厦的建立，对于步伐开发来说，脚手架使步伐员只需要关注业务逻辑的实现上面，我们不需要再关注兼容性题目，不需要再浪费时间在重复的工作上。
Vue Cli帮助我们快速构建大型web应用，提升了我们的开发效率，它基于webpack构建，并带有合理的默认设置。
安装

我们使用npm安装Vue Cli，Vue Cli 2和Vue Cli 3的安装方式略有不同，由于Vue Cli 3将包名称由vue-cli改成了@vue/cli，下面我们分别使用全局和当地的方式安装Vue Cli2和版本3：
1、全局安装

`// 版本2npm install -g vue-cli// 版本3npm install -g @vue/cli`

复制代码

2、当地安装

// 版本2npm install vue-cli --save// 版本3npm install @vue/cli --save

复制代码

构建我们的项目

安装好Vue Cli之后，下面我们来搭建一个项目。本文测试接纳的是全局安装的Vue Cli 2版本。
进入项目环境，创建初始化项目:

vue基于webpack构建项目
mydemo是我们的项目名称

创建过程中，会出现提示是否需要安装VueRouter和单位测试等功能，根据你的项目实际需要输入Y/N即可。
构建完成之后，在项目根目次下会天生一个mydemo目次，然后根据提示，进入mydemo项目，我们的项目结构如下：

运行npm run dev, 出现如下提示后，在欣赏器中访问http://localhost:8080。

npm run dev> mydemo@1.0.0 dev /Users/pizza/Downloads/vue-demo/mydemo> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 95% emitting DONE Compiled successfully in 2403ms Your application is running here: http://localhost:8080

复制代码

欣赏器中会出现Vue的欢迎页面，如下图所示：

至此，我们的Vue项目构建完成了。下面表明一下项目根目次下的各目次和文件的功能。
目次结构说明

1、build目次

build目次中的文件告急是用来举行webpack设置。
此中最告急的就是webpack.base.conf.js, webpack.dev.conf.js, webpack.prod.conf.js三个文件，分别是基本webpack设置、开发环境webpack设置、生产环境webpack设置。
npm run build下令是用来构建生产环境的，而build.js文件就是该下令的入口设置文件，告急用于生产环境。
2、config目次

config目次中的文件是用来设置项目测试和运行环境的。
在index.js文件中有一个proxyTable属性，该属性的属性值假如加上对应的配景所在和端口，就可以和配景举行联调。
3、static目次

static目次用来存储项目的静态文件。它是真正的静态资源，完全不被webpack处置处罚。
4、src目次

src目次存放的是我们项目的源文件，它是整个项目使用频率最高的文件夹。
assets目次存放的是公共的资源，会被webpack当成模块资源处置处罚；
components目次存放的是我们整个项目的全部组件；
router目次则存放的是我们整个项目的路由文件；
App.vue文件是全部vue文件的入口；
main.js对应App.vue 创建vue实例，也是入口文件，对应webpack.base.config.js里的入口设置文件。
5、迁徙我们的项目

接下来，我们将前面写的路飞学城项目迁徙到Vue Cli的结构中。
1、初始化一个luffycity项目