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

选择 Merge

选择 Manually select features

选择 Babel, Router, Vuex, Css Pre-processors, Linter / Formatter

选择 n

路由模式有两种：hash、historyhash – 即地址栏URL中的# 符号；如：http://www.abc.com/#/hellohistory – 利用了 HTML5 History Interface 中新增的 pushState() 和
replaceState() 方法。（这个方法就是面试中常问到的，怎么去除URL中的“#”号，此方法需要后端 Apache 或 Nginx 进行简单的路由配置，否则会报404。）注：这两个配置就是解决URL有没有 “#” 号的问题，如果不在意 “#”
号这个东西，就用hash。在意就用 history

选择 Sass/SCSS (with node-sass)

选择 ESLint + Prettier

选择 Lint on save

选择 In deficated config files

选择 N

依赖 element-ui

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

npm i element-ui -S

1	npm i element-ui -S

3、全局引入

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

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";`
}}}

css: {

// css预设器配置项

loaderOptions: {

scss: {

prependData: `@import "./src/styles/common.scss";`

}}}

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

npm install @vue/composition-api --save

1	npm install @vue/composition-api --save

9、安装axios:

npm install axios

1	npm install axios

10、安装sha1加密:

npm install js-sha1

1	npm install js-sha1

SVG文件解释依赖

npm install svg-sprite-loader -S

1	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);

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>

</svg>

</template>

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>

.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"] 
    });

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

1	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 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

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

gzip压缩插件:

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

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

去除console减少文件大小插件

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

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

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

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

1	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

狼哥博客

代码之家 – 狼哥Army

VUE基础知识与搭建

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

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

创建项目

依赖 element-ui