发布：2023/8/2 16:24:26作者：管理员 来源：本站 浏览次数：715
第一步：当然是基础环境的安装备
这里主要包括使用的 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 // 清除缓存命令
© Copyright 2014 - 2024 柏港建站平台 ejk5.com. 渝ICP备16000791号-4