【Web - 框架 - Vue】随笔 - Vue CLI - 快速上手

Vue CLI

创建Vue CLI项目

【步骤】

1. 命名项目空间：在电脑里创建文件夹，用于存储所有项目；
2. 定位项目空间：在"CMD窗口"里定位到工程的项目空间上；
   • 方法1：(a)用"WIN+R"打开运行窗口，输入"CMD"进入"CMD窗口"；(b)输入项目空间所在盘符(如"f:")后回车；©输入"cd 根目录路径(可拖拽文件夹到CMD窗口)"后按"enter"键即可；
   • 方法2：(a)打开项目空间所在文件夹；(b)"ALT+D"输入"CMD"后按"enter"键即可；
3. 创建项目第一步：在"CMD窗口"输入"vue create 项目名称"后按"enter"键后等待跳转即可(像是卡住了,是在加载,一定不要多次按空格)；
4. 创建项目第二步：用"↑"键和"↓"键进行选择，选择选项("Manually select features")后按"enter"键进入下一页面；
5. 创建项目第三步：用"↑"键和"↓"键选择，"space"键修改，选"Babel"、"Router"、"Vuex"后按"enter"键进入下一页面；
6. 创建项目第四步：选"2.x"后按下回车，出现"(Y/n)"继续按"enter"键进入下一页面；
7. 创建项目第五步：出现"？Where do you prefer placing config for Babel,ESLint,etc.?(Use arrow keys)"(翻译：你要将文件放到哪里?)，选择第二项("In package.json")后按"enter"键，出现"(y/N)"，继续按"enter"键即可；
8. 加载相关的文件：此时会自动加载相关文件，加载完毕后出现"Successfully created project 项目名称."则表示项目创建成功；

【注意】

1. 相关的文件最好不要有中文和空格；
2. 出现"error"相关，关掉重来试试；

启动Vue CLI项目

【步骤】

1. 用软件"IDEA"打开 "node.js"创建好的项目；
2. 在软件左下角找到"Terminal"选项卡并打开；

• 若定位是在项目的根目录上则进行下一步；
• 若没定位在项目的根目录上定位后下一步；

1. 输入"npm run serve"后回车，等待加载即可；
2. "Compiled successfully in XXXms"代表成功；

【说明】

1. 启动Vue ClI项目也可通过"CMD窗口"这样的方式来完成；
2. 启动成功的提示还包括"http://localhost:8080"这样的网址；
3. 在CMD 窗口中，按下"Ctrl + C" 即可停止已启动的项目；

解析Vue CLI项目

文件夹：.idea

【说明】：软件"IDEA"管理项目时自动生成的，可以无视；

文件夹：node_modules

【说明】：当前项目所需的依赖项(自己不要操作)；

【注意】：

1. 此文件夹不会提交到git，若需要的话用以下方式下载；
2. 若没有\缺失，可以在"Terminal"输入"npm install"来下载；

文件夹：public

【说明】：

1. 是当前项目启动后的根路径，可存放各种资源（如.css、.js、.jpeg）；
2. 若此文件夹下有"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文件相关

【说明】：

1. .vue文件的源代码可以由3大部分组成：(a).页面设计<template>；(b).样式<style>；©.脚本<script>；
2. 这3大部分并不都是必须的，例如某个.vue没有<script>也是完全正常的；

【<template>】：

1. 其直接子标签必须有且仅有一个；
2. 在其子级里如果出现了<router-view/>，表示此区域将由另一个视图文件来负责设计；
3. 至于是哪个视图，取决于"router/index.js"中的路由配置；

关于路由的简单配置

【说明】：

1. router下的index.js文件是用于配置路由的，在此文件中有一个"routes"常量，其属性值是一个对象的数组；
2. 数组元素中，可以有三个属性：
   • path：路径（不可重复）；
   • name：自定义名称，此属性可不配置；
   • component：路径对应的视图组件(某个.vue文件加载得到的对象)，有两种加载方式：1.在当前文件的起始位置通过"import"语法静态导入(默认导入)；2.在此"component"属性值位置使用箭头函数结合"import"函数进行导入；
3. 当显示的视图组件中使用到了<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的嵌套路由

【场景】：在开发实践中，一个项目中，可能存在这样的情况：

1. 部分页面完全没有共用的部分，所以，在App.vue中，要仅保留一个<router-view/>标签；
2. 但仍有部分页面存在共用的部分，所以，在其它.vue文件中，也可能需要再次使用到<router-view />；
3. 具体表现为在App.vue中只有<router-view/>，则此处实际显示的就是另外某个.vue了，但是在这些其他的.vue中也会用到<router-view/>，即出现了"嵌套"；

配置相关文件

【步骤】：

1. 打开CMD/终端窗口并且定位到当前项目的文件夹；
2. 输入"npm i 需要的配置 -S"按下回车 , 静待即可；
3. 出现"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

说明：

1. 在"package.json"文件中查看是否有相关依赖("'element-ui':'^2.15.9")；
2. 若有，但不能用，则删掉"node_modules"，重新下载即可；

Axios

【1】安装Axios

npm i axios -S

【2】配置Axios

位置："src/main.js"；

内容：

import axios from 'axios'
Vue.prototype.axios = axios

说明：

1. 需要注意，目标服务器可能是禁止跨域访问的（错误提示中有CORS字样），在Spring Boot工程中，可以使得启动项目的类实现WebMvcConfigurer接口；