Vue CLI基础

目录

1.关于vue CLI

关于Vue.js

关于VUE

关于Vue CLI

关于npm

2. 搭建开发环境

 安装Node.js

配置npm源

安装Vue CLI

3.创建工程

创建工程

启动服务

停止服务

重启服务

指定服务端口

4. 了解Vue CLI工程

工程结构

 关于视图组件

关于路由 

5.使用Element UI

关于Element UI

安装Element UI

6.使用axios

关于axios

axios基本使用

安装axios

7.Vue CLI的嵌套路由

 关于嵌套路由

嵌套路由的使用方式

---

1.关于vue CLI 关于Vue.js ●  Vue.js（读音：/vjuː /, 类似于：view） 是一套构建用户界面的渐进式框架 ● Vue.js的官方网址是： https://cn.vuejs.org/index.html 关于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   ● npm的全称是：Node Package Manager，可译为“Node包管理器”。

  ● 在早期没有npm时，如果需要在前端工程中使用某些框架（例如jQuery、Bootstrap等)，需要找到相关的官网或资源站点，要么下载这些框架的文件，要么使用cdn在线引用这些文件，其过程相对烦琐，因为这些框架的具体表现可能不只是一个文件，如果下载，只能下载打包后的文件并自行解压缩，如果在线引用，则需要自行添加多条源代码进行引用，同时，是这些框架也是在不停维护和更新的，即使开发人员在本地已经下载过这些框架文件，当需要新版本的框架时，又需要重新下载，或者上网搜索最新的cdn引用地址。
  ●为了解决这个问题，lsaac z. Schlueter使用运行在Node.js之上的Java Script语言开发了npm，它允许配置一个仓库，l并将大量框架的文件放在了npm仓库中，并提供了一系列的管理命令，最终，开发人员只需要使用npm的命令，就可以在线获取到框架文件。通常，框架的文件会自动的存储到工程目录下，并在工程的配置文件中进行注册，开发人员只需要在主配置中进行导入及一些简单的配置就可以开始使用这些框架。   ●一定程度上，npm 与Maven或Gradle是比较相似的。 2. 搭建开发环境  安装Node.js

 ●为了使用npm,首先需要官网下载Node.js安装包,安装过程没有特别注意的地方,整个安装过程可以不必修改任何内容,直至其自动安装完成(建议安装路径不要再C盘下 ).

 ●此安装包会自动配置环境变量，安装完成后，可检查npm命令是否可用，在 *** 作系统的命令提示符下执行以下命令即可:

npm -v

n

  ●执行以上命令后，将显示版本号，例如：

 ● 注意:你必须在新的命令提示符窗口(安装完Node.js后再打开的窗口)中运行此命令。

配置npm源

 ●nmp源（即npm仓库，称之为:registry)默认是境外服务器，在国内使用时，访问速度较慢，通常，在初次使用时，应该将npm源更换为国内的服务器地址，例如使用https://registry.npm.taobao.org作为npm

 ●源配置npm源的命令如下:

npm config set registry https://registry.npm.taobao.org

  ● 当配置成功后，可通过get命令可查看npm源：

npm config get registry

  ● 将显示当前生效的npm源，例如：

  ●注意:无论你使用哪种 *** 作系统，必须保证当前登录的用户具有最高访问权限，例如，在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的配置文件，在不熟悉的情况下不要手动修改此文件的配置
 

 关于视图组件

 ●需要注意:在