一,安装工具
- node.js安装,安装完使用node -v查看版本
关于node安装
nvm(node版本管理工具)下载及安装教程
nvm官网:https://nvm.uihtm.com/
cmd输入nvm -v 查看版本号
配置镜像源:(打开nvm安装目录下的settings.txt文件,添加下面镜像源)
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/
安装node:
使用NVM命令 nvm list available,查看可安装的NodeJS版本
nvm install node版本号
查看是否安装成功
nvm list
使用
nvm use 版本号
- 安装vue-cli
打开cmd输入:npm install -g vue-cli
配置淘宝镜像
npm config set registry https://registry.npm.taobao.org
查看当前使用的镜像地址命令
npm config get registry
二,创建项目
1,在cmd中输入vue init webpack 项目名称
例如:vue init webpack myproject1
2,输入后敲回车,有一些yes or no 的选项,都选no就行。
3,cd进入myproject1文件夹,输入npm run dev启动项目
浏览器输入http://localhost:8080打开项目
三,安装axios
npm install --save axios
四,elementUI使用
npm install --save element-ui
五,关于md5加密使用
安装:
npm install --save js-md5
使用:
import md5 from 'js-md5'
md5('md5加密')
六,vuex使用
下载:
npm install --save vuex@3.6.2
注意版本问题:vue 的 2.x 版本对应 vuex 的 3.x 版本,vue 的 3.x 版本对应 vuex 的 4.x 版本
七,路由使用
指定版本
npm i vue-router@3.2.0
Vue2:官方路由 Vue-Router 3.x
Vue3:官方路由 Vue-Router 4.x
八,vue引入.md文件
//安装
npm install --save html-loader;
npm install -- save markdown-loader;
npm install github-markdown-css
import 'github-markdown-css'; //哪里用markdown 就在哪里引用 可以放在min.js
下载所需package
npm i vue-markdown-loader -D
npm i vue-loader@14.2.2 -D
npm vue-template-compiler -D (若是已经有则不需要安装,不然有可能和现有的vue版本不匹配从而报错)
vue-loader版本过高会不兼容,经过测试安装14.2.2版本可以使用
vue-template-compiler需要和vue的版本一致
(若是直接安装vue-loader最新版会提示升级vue和vue-compiler,但是升级后的vue没有和vue-template-compiler匹配的版本,所以我选择降低vue-loader版本)
样式
npm i github-markdown-css -D
npm i highlight.js -D