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

【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. 加载相关的文件:此时会自动加载相关文件,加载完毕后出现"Su***essfully created project 项目名称."则表示项目创建成功;

【注意】

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

启动Vue CLI项目

【步骤】

  1. 用软件"IDEA"打开 "node.js"创建好的项目;
  2. 在软件左下角找到"Terminal"选项卡并打开;
  • 若定位是在项目的根目录上则进行下一步;
  • 若没定位在项目的根目录上定位后下一步;
  1. 输入"npm run serve"后回车,等待加载即可;
  2. "***piled su***essfully 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.jsjpeg)

【注释】:反正就是存放不随程序运行而变化的文件(如:logo.png);

文件夹:***ponents

【说明】:存放视图组件(被其他视图组件调用的),是可能被复用的组件,并且在不同的调用中,传入的参数可以不同;

文件夹: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:自定义名称,此属性可不配置;
    • ***ponent:路径对应的视图组件(某个.vue文件加载得到的对象),有两种加载方式:1.在当前文件的起始位置通过"import"语法静态导入(默认导入);2.在此"***ponent"属性值位置使用箭头函数结合"import"函数进行导入;
  3. 当显示的视图组件中使用到了<router-view />时,将根据当前访问的URL(浏览器中的路径)来决定显示哪个视图;

【例子】:

javascript">import HomeView from '../views/HomeView.vue'

const routes = [
    {
        path: '/',
        name: 'home',
        ***ponent: HomeView
    },
    {
        path: '/about',
        name: 'about',
        ***ponent: () => 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工程中,可以使得启动项目的类实现WebMv***onfigurer接口;
转载请说明出处内容投诉
CSS教程_站长资源网 » 【Web - 框架 - Vue】随笔 - Vue CLI - 快速上手

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买