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