vs code 开发 Vue 基础环境搭建

发布：2023/8/2 16:24:26作者：管理员来源：本站浏览次数：239

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

这里主要包括使用的 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　　　　　// 清除缓存命令

　VSCode&Vue入门

VS Code上搭建Vue开发环境超详细教程　

Smobiler开发APP环境搭建 win10下安装vue环境及搭建 vs2015开发手机app xamarin中可移植，shared区别 bat脚本一键配置java开发环境 android搭建python环境安卓手机python开发环境 VS Code上搭建Vue开发环境超详细教程 vs code 开发 Vue 基础环境搭建基于C#的MongoDB数据库开发应用MongoDB数据库的基础知识和使用 Android Studio 项目开发中LinearLayout基础线性布局实例 c#开发webapi挂载到iis，支持vue跨域corb访问的设置

柏港建站平台

柏港 VsCode

vs code 开发 Vue 基础环境搭建

柏港为您推荐了一些相关资讯