vs code 开发 Vue 基础环境搭建

做为一个初学者，花了近一周时间去学习vue 的开发，经常采坑就是因为工具的版本导致。

只要基础环境搭建好了，其实开发起来还是比较快捷方便；

后面在慢慢分享个人实战项目中的一些学习经验。

 

第一步：当然是基础环境的安装备

　　这里主要包括使用的 vs code 软件和 nodejs 的安装

　　vscode 下载地址：https://code.visualstudio.com/Download

　　nodejs下载地址：https://nodejs.org/en/download

　　如果你们机已经安装过了，可以通过来 cmd  查看 输入 node -v 查看nodejs 版本，我这暂时用的是  v14.19.3

第二步：对 vue 脚手架及常用工具的安装及介绍

　　后期的安装操作我这使用的是 vscode 中新建一个终端，也可以使用 cmd 进行具体跟据个人习惯来吧。 

　　cnpm 工具：

　　　　npm 通常是从国外镜像下载工具，这里建议可以安装个cnpm，这里个人使用 中国镜像站(https://npmmirror.com/) 的资源；

　　　　安装指令：npm install -g cnpm --registry=https://registry.npmmirror.com

　　　　如果已经安装过，可以通过 cnpm -v 命令查看版本及配置信息

　　yarn 工具：

　　　　对于国内用户来讲，不友好的就是网速的问题，经常断，make install太慢，这里跟据个人情况自愿是否进行安装；

　　　　安装指令：npm install -g yarn

　　　　查看版本：yarn --version  或  yarn -v

　　vue-cli 脚手架（必要）：

　　　　vue-cli是vue.js的脚手架，用于生成vue.js+webpack的项目模板，开发 vue 项目必需要安装；

　　　　安装指令：npm install -g vue-cli

　　　　查看版本：vue  -V  (注意这里的 v 是大写的 V)

　　webpack 打包工具：

　　　　webpack是js的打包工具
　　　　安装命令：npm install -g webpack

 

第三步：创建一个 Vue 项目

 

　　输入命令：vue create  vuedemo      用上下键选择vue 版本，这里我选择 vue2 然后一直回车；

　　　　　　   创建完后，一定记得要进入到vue 项目目录下，  cd vuedemo 

　　

　　运行项目：npm run serve

　　　　出现以下提示后标示 vue 项目已经运行，可以通过以下地方访问vue

　　　　App running at:
　　　　　　- Local: http://localhost:8082/
　　　　　　- Network: http://10.0.1.83:8082/

　　打包项目：npm run buil

　　　　执行完成后，会在项目根目录下新增一个 dist目录；

 

第四步：引入 element-ui

　　首先需要安装工具 core-js，core-js 它是JavaScript标准库的 polyfill（垫片/补丁）, 新功能的es'api'转换为大部分现代浏览器都可以支持 运行的一个'api' 补丁包集合

　　安装命令：npm install -g core-js      (全局安装)

　　安装elementUI：npm i element-ui -S

　　当出现异常时：npm WARN deprecated core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues

　　尝试先卸载 core-js：npm uninstall core-js     然后在安装指定版本 core-js ：npm install -g core-js@3.23.3

　　安装完 elementUI 后，需要项目中 main.js 引入 elementUI组件及相关样式；

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';  //这里采用全局引入，按需引入请查参考 element 官方文档
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI)

　　验证 elementUI 是否生效，打开  components/HelloWorld.vue 页面，在 div 之中增加一个按钮 <el-button type="primary">主要按钮</el-button>

　　然后 npm run serve 运行查看按钮样式是否成功；

Vue 实战项目中常用的工具及命令：

　　在实际过程个人经常遇到因工具版本导致的一系列奇葩问题，为了减少检错，这里我尽量采用本项目中用到的一些版本；

　　1、npm install vue-router@3.5.0      //vue 路由工具

　　2、npm install dayjs --save             //日期格式化工具

　　3、npm install moment　　　　　 //朋友推荐的一个时间格式化工具

　　4、npm install axios　　　　　　 //Axios 是一个基于 promise 的 HTTP 库，有很好的 拦截器和请求配置

　　5、npm i js-cookie　　　　　　   // 站点 cookie 工具简洁方便

　　6、npm install jwt-decode --save　　//对 jwt 格式的token 进行解析，获取token 中的 data 数据

　　7、npm i less；npm i less-loader@5.0     //less提供了可编程的css，个人暂时对该工具理解不是太明确，先用着


　　8、npm i -save lodash　　　　　//    _.cloneDeep(value)； 深度对象 copy，常用于copy 对象时需要解决对象的双向绑定；个人暂时使用 Object.assign({},value) 浅度 copy 代码

　　9、npm cache clean -f　　　　　// 清除缓存命令