vue学习五之VueCLi

概念

通俗的说，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 2 3 4

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

本地安装

1 2 3 4

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

构建咱们的项目

安装好Vue Cli以后，下面咱们来搭建一个项目。本文测试采用的是全局安装的Vue Cli 2版本。

进入项目环境，建立初始化项目:

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

建立过程当中，会出现提示是否须要安装VueRouter和单元测试等功能，根据你的项目实际须要输入Y/N便可。

构建完成以后，在项目根目录下会生成一个mydemo目录，而后根据提示，进入mydemo项目，咱们的项目结构以下：

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

 

1 2 3 4 5 6 7 8 9 10

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项目构建完成了。下面解释一下项目根目录下的各目录和文件的功能。

目录结构说明

build目录

build目录中的文件主要是用来进行webpack配置。

其中最重要的就是webpack.base.conf.js, webpack.dev.conf.js, webpack.prod.conf.js三个文件，分别是基本webpack配置、开发环境webpack配置、生产环境webpack配置。

npm run build命令是用来构建生产环境的，而build.js文件就是该命令的入口配置文件，主要用于生产环境。

config目录

config目录中的文件是用来配置项目测试和运行环境的。

在index.js文件中有一个proxyTable属性，该属性的属性值若是加上对应的后台地址和端口，就能够和后台进行联调。

static目录

static目录用来存储项目的静态文件。它是真正的静态资源，彻底不被webpack处理。

src目录

 

 

src目录存放的是咱们项目的源文件，它是整个项目使用频率最高的文件夹。

assets目录存放的是公共的资源，会被webpack当成模块资源处理；

components目录存放的是咱们整个项目的全部组件；

router目录则存放的是咱们整个项目的路由文件；

App.vue文件是全部vue文件的入口；

main.js对应App.vue 建立vue实例，也是入口文件，对应webpack.base.config.js里的入口配置文件。

迁移咱们的项目

接下来，咱们将前面写的路飞学城项目迁移到Vue Cli的结构中。

初始化一个luffycity项目

1	vue init webpack luffycity

初始化完成以后，在当前目录下面会出现一个luffycity的目录，目录结构与上述项目是一致的。咱们即将项目填充进这个脚手架中。

准备内容

并将图片存入static目录下, 以下图：

配置路由

以下图：

 

 

使用组件

以下图：

配置Vue实例

建立Vue实例，配置路由组件，同时安装element-ui并导入，以下图：

最后使用命令npm run dev运行项目。至此咱们已经将以前的项目完整的迁移到Vue Cli中。