VUE基础知识与搭建

安装node.js、vue3.0脚手架

1、安装node.js
https://nodejs.org/en/download/
查看版本号 node –v、npm –v 出现版本号即安装成功。（如未出现，请重启电脑后再试）node8.9或以上版本
2、管理nodejs版本（非必装）
执行命令安装：npm install -g n
n latest    (升级 node.js 到最新版)
n stable（升级 node.js 到最新稳定版）
n 后面也可以跟随版本号，例如：$ n v0.10.26 或者 $ n 0.10.26
3、全局安装 vue-cli3.0 脚手架
卸载：如果已经全局安装了旧版本的vue-cli(1.x或2.x)，需要先卸载：npm uninstall vue-cli -g
安装：npm install -g @vue/cli
查看版本号：vue -V，出现版本号即安装成功。
3.0对2.0 版本的桥接：npm install –g @vue/cli-init
4、安装淘宝镜像 cnpm  (非必装，网络慢的情况可安装)
npm install -g cnpm –registry=https://registry.npm.taobao.org

建立项目仓库（ Gitee 或 Github 或 Coding 或 Gitlab ）

GIT基础命令（粘贴shift + insert）
拷备项目：git clone <仓库地址>
创建分支：git branch <name>
创建并进入分支：git checkout –b <nam>
查看状态：git status
添加所有文件：git add .
提交：git commit –m ‘这里是当前提交的描述’
拉取：git pull
推送：git push
查看分支：git branch –list
查看分支（包含远程分支）：git branch -a

创建项目

vue create vue-admin

1
选择 Merge
2
选择 Manually select features
3
选择 Babel, Router, Vuex, Css Pre-processors, Linter / Formatter
4
选择 n
路由模式有两种：hash、historyhash – 即地址栏URL中的# 符号；如：http://www.abc.com/#/hellohistory – 利用了 HTML5 History Interface 中新增的 pushState() 和
replaceState() 方法。（这个方法就是面试中常问到的，怎么去除URL中的“#”号，此方法需要后端 Apache 或 Nginx 进行简单的路由配置，否则会报404。）注：这两个配置就是解决URL有没有 “#” 号的问题，如果不在意 “#”
号这个东西，就用hash。在意就用 history
5
选择 Sass/SCSS (with node-sass)
6
选择 ESLint + Prettier
7
选择 Lint on save
8
选择 In deficated config files
9
选择 N

依赖 element-ui

1、官网: https://element.eleme.cn/#/zh-CN
2、安装依赖

npm i element-ui -S

3、全局引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

5、vue.config.js https://cli.vuejs.org/zh/config/ 手册
6、配置全局样式

css: {
// css预设器配置项
loaderOptions: {
scss: {
prependData: `@import "./src/styles/common.scss";`
}}}

7、路由重定向redirect: “login”
8、安装API:

npm install @vue/composition-api --save

9、安装axios:

npm install axios

10、安装sha1加密:

npm install js-sha1

 

SVG文件解释依赖

npm install svg-sprite-loader -S

icons/index.js

import Vue from "vue";
import SvgIcon from "./SvgIcon";

Vue.component("svg-icon", SvgIcon);

/**
 * require.context 读取指定目录的所有文件
 * 第一个参数: 目录
 * 第二个参数: 是否遍历子级目录
 * 第三个参数: 定义遍历文件规则
 */
const req = require.context("./svg", false, /\.svg$/);

const requireAll = (requireContext) => {
    return requireContext.keys().map(requireContext);
};

requireAll(req);

icons/SvgIcon.vue

<template>
    <svg :class="svgClass" aria-hidden="true">
        <use :xlink:href="iconName"></use>
    </svg>
</template>
<script>
import { computed } from "@vue/composition-api";
export default {
    name: "svgIcon",
    props: {
        iconClass: {
            type: String,
            default: ""
        },
        className: {
            type: String,
            default: ""
        }
    },
    setup(props, {refs, root }){
        const iconName = computed(() => `#icon-${props.iconClass}`);
        const svgClass = computed(() => {
            if(props.className) {
                return `svg-icon ${props.className}`;
            }else {
                return `svg-icon`;
            }
        });

        return {
            iconName,
            svgClass
        };
    }
}
</script>
<style lang="scss" scoped>
.svg-icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
}
</style>

vue.config.js

chainWebpack: (config) => {
    const svgRule = config.module.rule("svg");
    svgRule.uses.clear();
    svgRule
    .use("svg-sprite-loader")
    .loader("svg-sprite-loader")
    .options({
      symbolId: "icon-[name]",
      include: ["./src/icons"]
    });

Icon下载地址: https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.4&type=1

 

Cookie依赖安装

npm install —save cookie_js

打包工具

分析文件大小插件

npm install --save-dev webpack-bundle-analyzer 
npm install babel-plugin-import --save-dev
npm install babel-plugin-component -D （按需加载组件插件，一般不用）

 

路由懒加载插件:

npm install --save-dev @babel/plugin-syntax-dynamic-import

gzip压缩插件:

npm i --save-dev compression-webpack-plugin

去除console减少文件大小插件

npm install uglifyjs-webpack-plugin --save-dev

// webpack的配置在这个属性里修改configureWebpack

npm install --save-dev copy-webpack-plugin

 

Vue2.0与Vue3.0生命周期

beforeCreate -> 请使用 setup()

created -> 请使用 setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

errorCaptured -> onErrorCaptured

 

 

滚动至顶部