Font Awesome使用
安装Font Awesome
npm i --save @fortawesome/fontawesome-svg-core
# 免费icon，引入需要的icon包
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
# 安装Vue2组件
npm i --save @fortawesome/vue-fontawesome@latest-2
引入Vue2项目
main.js
import Vue from 'vue'
import {...
Vue Router使用
安装Vue Router插件
Vue Router3匹配Vue2
Vue Router4匹配Vue3
npm i vue-router@3
Vue Router引入
在与main.js文件同级的目录下增加一个pages文件夹用于放置路由组件
在与main.js文件同级的目录下增加一个router文件夹
router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import About from '../pages/About';
import Home from '../pages/Home';
import News from '../pages/News';
import ...
Vuex使用
安装Vuex插件
Vuex3匹配Vue2
Vuex4匹配Vue3
npm i vuex@3
Vuex引入
在与main.js文件同级的目录下增加一个store文件夹
store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import calculator from './calculator';
import person from './person';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
calculator,
person
}
});
main.js
将Vuex.Store实例对象...
Vue组件间数据传递
props传递数据
父组件向子组件传递数据，传递的数据只读
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
<template>
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
定义事件
子组件向父组件传递数据
export default {
name: 'SendHello',
data() {
return {
item: 'hello'
}
},
methods: {
sendMessage() {
...
Vue项目基本结构
项目初始文件结构
通过Vue-CLI创建的项目文件架构
node_modules 依赖库文件夹
public/index.html 入口页面
src/main.js 主JS
src/App.vue 主JS引入的组件
src/componets 自定义组件文件夹
vue.config.js Vue配置文件
层级结构简析
入口页面
public/index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content=...
Vue开发环境搭建
安装Node.js
安装完成后，查看版本确认安装成功
node -v
配置npm镜像
npm config set registry https://registry.npmmirror.com
安装Vue CLI
npm install -g @vue/cli
创建项目
以管理员身份启动PowerShell，设置脚本执行权限
set-ExecutionPolicy RemoteSigned
运行创建项目脚本
vue create language-trainer-vue
项目关联GitHub库
创建出来的项目已经是一个Git仓库，把Git仓库关联远端即可
git remote add origin git@github.com:x/y.git
g...
Element UI使用
Element UI安装
npm i element-ui -S
引入Vue2项目
main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
332 post articles, 34 pages.