Vue CLI
创建Vue CLI项目
【步骤】
命名项目空间：在电脑里创建文件夹，用于存储所有项目；定位项目空间：在"CMD窗口"里定位到工程的项目空间上； 方法1：(a)用"WIN+R"打开运行窗口，输入"CMD"进入"CMD窗口"；(b)输入项目空间所在盘符(如"f:")后回车；©输入"cd 根目录路径(可拖拽文件夹到CMD窗口)"后按"enter"键即可；方法2：(a)打开项目空间所在文件夹；(b)"ALT+D"输入"CMD"后按"enter"键即可； 创建项目第一步：在"CMD窗口"输入"vue create 项目名称"后按"enter"键后等待跳转即可(像是卡住了,是在加载,一定不要多次按空格)；创建项目第二步：用"↑"键和"↓"键进行选择，选择选项(“Manually select features”)后按"enter"键进入下一页面；创建项目第三步：用"↑"键和"↓"键选择，"space"键修改，选"Babel"、"Router"、"Vuex"后按"enter"键进入下一页面；创建项目第四步：选"2.x"后按下回车，出现"(Y/n)"继续按"enter"键进入下一页面；创建项目第五步：出现"？Where do you prefer placing config for Babel,ESLint,etc.?(Use arrow keys)"(翻译：你要将文件放到哪里?)，选择第二项("In package.json")后按"enter"键，出现"(y/N)"，继续按"enter"键即可；加载相关的文件：此时会自动加载相关文件，加载完毕后出现"Successfully created project 项目名称."则表示项目创建成功； 【注意】
相关的文件最好不要有中文和空格；出现"error"相关，关掉重来试试； 启动Vue CLI项目
【步骤】
用软件"IDEA"打开 "node.js"创建好的项目；在软件左下角找到"Terminal"选项卡并打开； 若定位是在项目的根目录上则进行下一步；若没定位在项目的根目录上定位后下一步； 输入"npm run serve"后回车，等待加载即可；"Compiled successfully in XXXms"代表成功； 【说明】
启动Vue ClI项目也可通过"CMD窗口"这样的方式来完成；启动成功的提示还包括"http://localhost:8080"这样的网址；在CMD 窗口中，按下"Ctrl + C" 即可停止已启动的项目； 解析Vue CLI项目
文件夹：.idea
【说明】：软件"IDEA"管理项目时自动生成的，可以无视；
文件夹：node_modules
【说明】：当前项目所需的依赖项(自己不要操作)；
【注意】：
此文件夹不会提交到git，若需要的话用以下方式下载；若没有\缺失，可以在"Terminal"输入"npm install"来下载； 文件夹：public
【说明】：
是当前项目启动后的根路径，可存放各种资源（如.css、.js、.jpeg）；若此文件夹下有"1.jpg"，则可通过"http://loaclhost:8080/1.jpg"查看； 文件：favicon.ico
【说明】：项目的图标，每个项目在(编译后的)根目录下有此文件，会在浏览器中显示；
文件：index.html
【说明】：当前项目的页面，在"Vue CLI"项目中有且仅有一个"HTML页面"；
文件夹：src
文件夹：assets
【说明】：资源文件夹，用于存放静态资源(如 .css、.js、jpeg)
【注释】：反正就是存放不随程序运行而变化的文件(如：logo.png)；
文件夹：components
【说明】：存放视图组件(被其他视图组件调用的)，是可能被复用的组件，并且在不同的调用中，传入的参数可以不同；
文件夹：router
文件：index.js
【说明】：路由配置文件，主要配置访问路径与视图组件的对应关系；
文件夹：store
文件：index.js
【说明】：存储共享的量的文件；
文件夹：views
【说明】：用于存放视图组件；
文件：APP.vue
【说明】：是"index.html"默认加载的视图文件；
文件：main.js
【说明】：当前项目的主".js"文件，通常用于管理一些配置；
【注释】：如：添加了某些依赖项(如:Element UI)后，可能需要在此处导入，才可以使得各".vue"文件可以使用这些依赖项；
文件：.gitignore
【说明】：用于配置哪些文件和文件夹不会提交到"git"，如果此项目不提交到"git"，则此文件没用；
文件：babel.config.js
【说明】："Babel"的配置文件，通常不用关心(不需要操作)；
文件：jsconfig.json
【说明】：".js"文件的配置文件，通常不用关心(不需要操作)；
文件：LICENSE
【说明】：许可证协议文件，默认的项目中通常没有此文件，在"git"上公开的项目通常都包含此文件；
文件：pakcage.json
【说明】：主要配置当前项目的依赖项和项目的编译打包等配置，通常不建议手动修改；
文件：package-lock.json
【说明】：自动管理的配置文件，通常不建议手动修改；
文件：README.md
【说明】：此项目的说明文件，如果此项目提交到"git"，通常会显示在"git"的此项目的主页；
【注释】：通常应该在此文件中对项目进行必要的描述(如何配置此项目、如何启动此项目、相关的注意事项等)；
文件：vue.config.js
【说明】：".vue"文件的配置文件，通常不用关心(不要操作)；
使用Vue CLI项目
.vue文件相关
【说明】：
.vue文件的源代码可以由3大部分组成：(a).页面设计<template>；(b).样式<style>；©.脚本<script>；这3大部分并不都是必须的，例如某个.vue没有<script>也是完全正常的； 【<template>】：
<router-view/>，表示此区域将由另一个视图文件来负责设计；至于是哪个视图，取决于"router/index.js"中的路由配置； 关于路由的简单配置
【说明】：
router下的index.js文件是用于配置路由的，在此文件中有一个"routes"常量，其属性值是一个对象的数组；数组元素中，可以有三个属性： path：路径（不可重复）；name：自定义名称，此属性可不配置；component：路径对应的视图组件(某个.vue文件加载得到的对象)，有两种加载方式：1.在当前文件的起始位置通过"import"语法静态导入(默认导入)；2.在此"component"属性值位置使用箭头函数结合"import"函数进行导入； 当显示的视图组件中使用到了<router-view />时，将根据当前访问的URL（浏览器中的路径）来决定显示哪个视图； 【例子】：
import HomeView from '../views/HomeView.vue'const routes = [ { path: '/', name: 'home', component: HomeView }, { path: '/about', name: 'about', component: () => import('../views/AboutView.vue') } ]Vue CLI的嵌套路由
【场景】：在开发实践中，一个项目中，可能存在这样的情况：
部分页面完全没有共用的部分，所以，在App.vue中，要仅保留一个<router-view/>标签；但仍有部分页面存在共用的部分，所以，在其它.vue文件中，也可能需要再次使用到<router-view />；具体表现为在App.vue中只有<router-view/>，则此处实际显示的就是另外某个.vue了，但是在这些其他的.vue中也会用到<router-view/>，即出现了“嵌套”； 配置相关文件
【步骤】：
打开CMD/终端窗口并且定位到当前项目的文件夹；输入"npm i 需要的配置 -S"按下回车 , 静待即可；出现"added ‘数字’ packages in '数字’s"表示成功； Element UI
【1】安装Element UI
npm i element-ui -S【2】配置Element UI
位置："src/main.js"；
内容：
import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);【3】检查Element UI
说明：
在"package.json"文件中查看是否有相关依赖("'element-ui':'^2.15.9")；若有，但不能用，则删掉"node_modules"，重新下载即可； Axios
【1】安装Axios
npm i axios -S【2】配置Axios
位置："src/main.js"；
内容：
import axios from 'axios'Vue.prototype.axios = axios说明：
需要注意，目标服务器可能是禁止跨域访问的（错误提示中有CORS字样），在Spring Boot工程中，可以使得启动项目的类实现WebMvcConfigurer接口；