文章目录
Vue CLI简单概述
- Vue CLI是一个基于Vue.js进行快速开发的完整系统
- Vue CLI致力于将Vue生态中的工具基础标准化(如Webpack),它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样编程人员可以专注在撰写应用上,而不必花时间在处理配置上
- 同时,Vue CLI也为每个工具提供了调整配置的灵活性,无需eject
Vue-CLI的安装
执行以下命令进行安装
npm install -g @vue/cli
命令成功执行结束后显示如下:
使用以下命令进行查看Vue-Cli的版本
vue --version
VueCLI创建项目
2.X版本创建项目
- 执行以下命令
# 分别执行
npm install -g @vue/cli-init
# 注意 项目名称不能是大写
vue init webpack vue-entry
成功创建后显示如下:
- 进入工程,进行启动
实际上就是执行上述显示的两条命令
# 进入到工程目录下
cd vue-entry
# 进行启动
npm run dev
执行后显示如下
我们进入给的链接,显示页面如下:
- 对项目进行编译,然后使用WebStorm打开
使用WebStorm打开项目后,打包后的页面被放在dist文件夹下
如果发现使用浏览器打开index.html文件后,页面空空如也,可能是路径的问题,将文件内容更改为相对路径即可
用浏览器打开后页面显示如下:
3.x创建项目
- 3.x可以进行自定义选择vue cli版本创建项目
创建项目命令如下:
# vue-three是项目名称
vue create vue-three
执行后会出现如下界面
选择了自定义后会出现如下界面
选择2.x版本后,出现如下界面,依次进行选择
选择完毕后就开始了欢快的创建工程过程,完成后会出现以下内容
- 根据上述命令进行启动项目
cd vue-three
# 启动命令与2.x版本稍有差异
npm run serve
启动完成后可以根据给的地址进行访问
- 访问
- 对比一下2.x创建项目所生成的项目文件结构和3.x创建项目所生成的项目文件结构
3.x项目文件结构
2.x项目文件结构
肉眼可见的3.x比2.x少了很多东西
Vue CLI工程和普通工程
不使用Vue脚手架时创建的普通工程
- 创建一个html文件
- 引用vue.js
- 编写Vue组件
Vue CLI工程
Vue 的普通工程里,我们是将组件和页面都写在一个文件内
但有了Vue CLI后,Vue脚手架帮助我们将组件整合成为了一个.vue文件
Vue工程改造
我们在上面使用vue命令创建了一个vue工程
在之后我们需要创建自己的vue工程时,可以复制整个工程 文件夹,然后进行一些更改作为我们自己的项目,而不必再一次使用命令进行繁琐的操作
复制后使用WebStorm(或其他用的顺手的开发工具)打开,然后对其中的一些文件进行修改
修改后的App.vue如下所示,启动工程后
访问localhost:8080
使用Vue脚手架的工程
- 主要的点就是在组件部分,Vue将组件整合为了一个.vue文件,当某处需要这个组件时,进行引用即可
- .vue文件包含了三个部分:template、script、style
- Vue普通工程与脚手架工程的对比
Vue组件
普通工程中注册Vue组件(局部 & 全局)
- 全局注册
js里进行全局注册
Vue实例进行绑定使用,全局注册组件有两种方式进行使用
方式1: div中使用<web-component>
方式1结果如下:
方式2:直接在Vue实例中使用
方式2结果演示
- 局部注册
局部注册是以对象的方式进行注册的
在使用的时候略与全局注册有一一点点差别,需要在Vue实例中进行声明
局部组件结果演示
Vue-CLI工程注册组件
组件(手动渲染)
- 创建组件
组件目录
Login组件
Home组件
- App.vue组件中使用Home和Login组件
!这里说明一下手动渲染:我们虽然引用并且注册了两个组件,但是具体在<div>中使用哪一个是需要手动去写的,使用Login组件就在<div>中使用<login>,使用home就在<div>中使用<home>,非常不方便,在后面的Vue路由将会解决这一问题。
启动工程,查看效果