目录
1.关于vue CLI
关于Vue.js
关于VUE
●传统的前端开发框架大多是基于DOM (Document Object Model:文档对象模型)的,在操作时,需要关心被操作的页面元素,甚至这些页面元素的层级结构,核心思想是:先根据DOM找到对应的页面元素,然后再进行相关操作,例如设计其样式,或配置某个事件
●Vue则是将必要的页面元素的相关属性(例如页面元素的样式、控件的值、页面元素的事件等)与数据进行绑定,当实现绑定后,就不再需要关心页面元素本身了,只需要关心各个数据即可,从而避免了大量繁琐的DOM操作,也实现了页面设计与数据处理的分离
关于Vue CLI
●Vue CLI通常称为“VUE脚手架”,它是一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的工程模板
●Vue CLI相关文档的官方网址是:https:/ / cli.vuejs.org/zh/guide/
●Vue CLI是由VUE提供的一个官方客户端(client),专门为单页面应用快速搭建繁杂的脚手架
●所谓的单页面,指的是在工程中,理论上只有1个HTML页面,只不过这个页面的所有内容都是可以动态更新的,你随时可以使用新的页面内容替换原有的内容,并且,你还可以使得URL一并更新,从用户体验上来说,这种单页面应用与传统的前端应用并没有什么不同
●需要注意:在使用传统模式开发的前端工程中,各个页面是相对独立的,甚至你可以在本地硬盘上找到对应的html文件并双击直接打开它,而VueCLI工程与一个Web应用程序一样,是需要启动服务才可以访问的,一定程度上,它的上手难度会更大一些,但是在中大型应用程序的开发中,它在开发效率、管理和维护成本上有更大的优势
●单页面应用的工程中需要一定的配置,对配置文件的位置也有一定的要求,整体工程结果并不像传统的前端应用工程那么自由,所以,手动创建这种应用的成本较大,而Vue CLI则可以自动生成vue.js + webpack的工程模板,是为现代前端工作流提供了Batteries-included (自含全套工具集)的构建设置,只需要几分钟的时间甚至更短的时间就可以运行起来。
●由Vue CLl创建的工程,默认即是热部署的,当你启动了这个工程(非打包后的工程)的服务后,在绝大部分情况下,修改源代码后并不需要重新启动服务,即可体验到修改后的内容。
关于npm
●为了解决这个问题,lsaac z. Schlueter使用运行在Node.js之上的Java Script语言开发了npm,它允许配置一个仓库,l并将大量框架的文件放在了npm仓库中,并提供了一系列的管理命令,最终,开发人员只需要使用npm的命令,就可以在线获取到框架文件。通常,框架的文件会自动的存储到工程目录下,并在工程的配置文件中进行注册,开发人员只需要在主配置中进行导入及一些简单的配置就可以开始使用这些框架。
2. 搭建开发环境
安装Node.js
●为了使用npm,首先需要官网下载Node.js安装包,安装过程没有特别注意的地方,整个安装过程可以不必修改任何内容,直至其自动安装完成(建议安装路径不要再C盘下 ).
●此安装包会自动配置环境变量,安装完成后,可检查npm命令是否可用,在操作系统的命令提示符下执行以下命令即可:
npm -v
●执行以上命令后,将显示版本号,例如:
● 注意:你必须在新的命令提示符窗口(安装完Node.js后再打开的窗口)中运行此命令。
配置npm源
●nmp源(即npm仓库,称之为:registry)默认是境外服务器,在国内使用时,访问速度较慢,通常,在初次使用时,应该将npm源更换为国内的服务器地址,例如使用https://registry.npm.taobao.org作为npm
●源配置npm源的命令如下:
npm config set registry https://registry.npm.taobao.org
npm config get registry
●注意:无论你使用哪种操作系统,必须保证当前登录的用户具有最高访问权限,例如,在Windows操作系统中,请使用管理员模式的命令提示符,在Mac OS中,使用sudo来执行命令。
安装Vue CLI
安装Vue CLI的命令如下:npm install -g @vue/cli
npm install -g @vue/cli
●以上命令中,-g表示全局安装,则当前操作系统中所有用户均可使用,且自动配置Vue环境变量。
●此过程将从仓库服务器中下载Vue CLl,通常耗时30秒至5分钟左右。提示:如果安装过程中的日志提示更新npm版本,或提示某些软件版本偏旧等,均可无视。
●注意:以上操作仍需要管理权限才可以成功执行。
●安装完成后,可通过以下命令检验Vue CLI是否安装成功:
vue -V
●注意:以上命令中的-V中的V是大写的。
●执行以上命令后,将显示当前的Vue CLI版本号,例如:
3.创建工程
创建工程
●创建Vue CLI工程:vue create 工程名字 (注意:首先切换到对应的路径 d:直接切换到D盘根目录 , cd 路径 切换到对应的路径下面 按下enter键后,创建过程耗时较长,不要反复 按,否则会视为选择各设置选择的默认项)
●创建过程中会有一些选项,最先提示的选项是Please pick a preset,表示“请选择一个预设项”,推荐选择Manually select features,表示“手动选择”,通过键盘的上下箭头进行选择,选择到目标项后按下键盘的Enter键到下一步∶
●接下来的选项是Check the features needed for your project,表示“选择你的工程中需要使用的功能”,推荐在列表中选择Babel、RouterVuex这3项,使用键盘的上下箭头移动,使用空格选中或取消选中,选择完成后按下键盘的Enter键到下一步:
●关于列表中主要的几个功能:
- Babel: ES6高级语法向低版本语法兼容的工具
- Router:路由管理器(管理请求路径与页面资源的映射关系,相关于Controller中RequestMapping)
- Vuex:全局状态管理工具(管理全局共享的内存中的数据,例如各页面需要使用到的用户信息)
- Linter:初学者不建议勾选,是代码规范检验工具,其要求较严格
●接下来的选项是Choose a version of Vue.js that you want to startthe project with,表示“选择你的工程中希望使用的Vue.js的版本”,推荐选择2.x这项,选择到目标项后按下键盘的Enter键到下一步:
●接下来的选项是Use history mode for router,表示“是否在路由中选择历史模式”,推荐选择“是”,输入Y后按下键盘的Enter键到下一步(提示信息中,Y是大写的,表示它是默认选项,不输入Y而直接按下Enter键是等效的):
●接下来的选项是Where do you prefer placing config for Babel,ESLint,etc.?,表示“你习惯把一些配置信息存放在哪里?”,推荐选择In package.json,即存放在package.json文件中,选择到目标项后按下键盘的Enter键到下一步:
●最后的选项是Save this as a preset for future projects?,表示“是否保存以上配置信息,作为后续将创建的新工程的预设?”,推荐选择“否”,输入N后按下键盘的Enter键(提示信息中,N是大写的,表示它是默认选项,不输入N而直接按下Enter键是等效的):
●至此,配置过程已经结束,接下来会自动创建工程,耗时取决于网络速度,通常需要30秒至5分钟左右
启动服务
●进入工程目录,执行npm run serve命令即可启动此工程的服务(过程中会编译打包此工程)︰
● 当工程成功启动后,即可根据提示的URL在浏览器中进行访问:访问地址:http://localhost:8080/
停止服务
● 提示:当按下Ctrl+C后,会提示"终止批处理操作吗(Y/N)?",其实,当按下Ctrl+C后,服务已经被停止,在此提示中无论选择Y或N结果都已经不重要了
重启服务
● Vue CLI工程启动的服务支持热部署(热更新,即:当保存对源代码的修改后,会自动重新编译打包并覆盖原本已经启动的服务中的文件),并没有重启服务的做法,如果在某些场景中需要实现“重启”的效果(例如修改服务端口等),可以先停止服务,然后再次启动服务
指定服务端口
● 此服务默认占用8080端口,如果端口已经被占用,将自动修改端口为8081或继续向后递增端口号..如需手动修改端口号,在工程根目录下的package.json中修改scripts属性下serve的值:
vue-cli-service serve --port 端口号
4. 了解Vue CLI工程
工程结构
● [.idea]:使用IntelliJ lDEA打开工程时会产生此文件夹,其中的文件都是IntelliJlDEA管理此工程时将使用到的,不手动管理,即使删除此文件夹,IntelliJIDEA也会按需自动创建此文件夹及其下必要的文件
● [node_modules]:工程中使用到的模块,也可以理解为工程的依赖项,例如Babel、Vue等框架的文件,不手动管理
--需要注意:如果是从Git或其它位置复制得到的工程,可能没有此文件夹,需要运行
npm install,否则将无此文件夹及其下的各依赖项,工程将无法正常启动
●[public]:工程被编译打包后仍会保留的内容(文件内容可能会在编译打包过程中修改)
--你可以自行在此文件夹下创建子级文件夹,用于存放静态资源,例如图片等public/index.html:默认的主页,通常不修改其内容。
●[src]:页面源代码,除工程配置以外的所有开发都在此文件夹下
●[src/assets]:资源文件夹,通常存放图片等
-注意:仅不需要被程序动态控制的图片放在此处
●[src/components]:视图组件,通常是可以被其它各页面复用的,是各个.vue文件
●[src/router]:路由控制
●src/router/index.js:路由配置文件,除非工程中页面数量较大,或路由关系复杂,否则使用这1个文件进行路由管理即可
●[src/store]:全局共享的内存中的数据
●src/store/index.js:暂不关注
●[src/views]:视图组件,通常,每个页面在此文件夹都应该有1个对应的文件,可引用
●[src/components]下的组件
●src/App.vue: 默认的主页视图组件
●src/main.js:工程的主js文件,通常用于导入工程中将使用的其它库-此文件中所有import语句必须在最上方位置,各import语句不区分先后顺序.
●gitigore:用于配置使用Git提交工程时将忽略的文件和文件夹
●bable.config.js: Babel的配置文件,在不熟悉的情况下不要手动修改此文件的配置
●package.json:工程的管理配置文件,相当于Maven项目的po m.x ml在不熟悉的情况下不要手动修改此文件的配置,可能需要关注的主要有:
- scripts:支持的2个npm命令参数,例如npm run serve、npc run build
- dependencies:运行时依赖项
- devDependencies:开发依赖项,将不参与打包
●package-lock.json:工程的管理配置文件,在不熟悉的情况下不要手动修改此文件的配置
●README.md:工程的说明文档,用于开发人员编写如何使用、注意事项、更新日志等内容,使用IntelliJIDEA首次打开工程时,会自动打开此文件,此文件的默认内容中提示了工程的运行命令
vue.config.js: Vue的配置文件,在不熟悉的情况下不要手动修改此文件的配置
关于视图组件
●需要注意:在<template>必须有且仅有1个直接子节点(通常是<div>节点),否则将无法通过编译!
关于路由
●vue CLI应用是单页面的,也就是说,在Vue CLI工程的设计思想中,页面只有1个,只不过页面中的内容是可以动态调整的,所以,无论是使用不同的URL进行访问,还是页面中触发某个事件后,虽然用户看到了不同的页面效果,但是,用户看到的其实永远只是1个页面,只是页同中的内容不同而已,这也就是视图组件源文件中使用<template>节点设计页面元素的原因(template释义为:模板)。
5.使用Element UI
关于Element UI
●Element Ul是一套采用Vue 2.0 作为基础框架实现的组件库,一套为开发者、设计师和产品经理准备的基于Vue 2.0的组件库,提供了配套设计资源,帮助网站快速成型。
●Element UI之所以被称之为“组件库”,是因为它不再使用传统的HTML标签,而是自行定制了一系列的标签(包括标签属性),以按钮为例,其源代码大概是这样的:
安装Element UI
●首先进入工程文件夹(如果使用IntelliJIDEA打开了此工程,直接点击lntelliJlDEA下面的Terminal圆可).然后使用npm命令安装Element Ul,以下2条命令是等效的(注意:以下命令区分大小写,例如最后的-S的字母是大写的):
npm i element-ui -S
npm install --save element-ui
●安装完成后,在工程的main.js中导入并使用Element UI: 至此,已经可以在工程中使用Element UI了。
// main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
6.使用axios
关于axios
●axios是一个易用、简洁且高效的http库,主要用于发起HTTP请求,并获取响应的结果。
●axios的主要特点有:
-从浏览器中创建XMLHttpRequests- 从node.js 创建http请求
-支持Prom ise APl
–拦截请求和响应
–转换请求数据和响应数据-取消请求
一自动转换JSON数据-客户端支持防御XSRF
axios基本使用
●更多示例请参考axios官方文档:http: //ww w.axios-js.com/zh-cn/docs/
安装axios
●与此前的Element Ul的安装方式类似,当需要安装axios时,应该先切换到Vue CLI工程的文件夹下,然后再运行命令以安装axios,安装命令为:
npm i axios -S 或
npm install --save axios
●安装完成后,也需要在main.js中添加配置,配置代码为:
import axios from 'axios'
Vue.prototype.axios = axios
7.Vue CLI的嵌套路由
关于嵌套路由
●在实际应用开发中,页面的内容呈现可能存在巨大的差异
●由于Vue CLI工程是单页面的,为了保证能显示各式各样的页面,则需要将页面的整个区域都设计为<router-view/>,然后根据URL不同,加载不同的视图组件 (.vue文件)。
●但是,即使将整个页面的显示区域作为一个<router-view/>,多个页面仍可能存在共用的部分,例如:
● 如果要设计为以上风格,则页面中的右侧最大的区域也必须是一个
<router-view/>,就会形成最外部(页面所有部分)是<router-view />的同时,内部还有一个<router-view />(右侧的大区域),在配置路由时,就需要使用到嵌套路由的做法了。
●当然,如果以上设计风格中右侧区域中仍有各页面均显示的部分,还可以继续在其内部进行嵌套,通常,并不建议嵌套太多层次。
嵌套路由的使用方式
●而嵌套路由则需要在原路由的某对象中添加children属性,此属性仍是一个数组,其内部的配置方式与routes常量是相同的,例如:
const routes = [
{ path: '/admin',
component: () => import('../views/AdminView.vue'),
children: [
{ path: 'user/list'
component: () => import('../views/admin/UserListView.vue')
},
{path: 'user/add-new'
component: () => import('../views/admin/UserAddNewView.vue')
}
]
}
];
● 提示:以上children下的配置中,各path没有使用/作为第1个字符,则表示在父级路径的基础上增加,例如配置为user/list,由于父级配置了/admin,则完整路径为/admin/user/list。
●另外,如果希望访问子级嵌套的视图(例如以上/admin对应的视图)时就打开某个其子级视图(例如以上/admin/user/list对应的视图),在配置存在子级的视图(例如以上/admin对应的视图)时,还可以添加redirect属性,使其直接重定向到子级视图,例如: