BiuBiu

# vue

# 一、Node环境

安装node 16 https://nodejs.org/download/release/v16.20.0/

NPM查看全局安装过的包

npm list -g --depth 0
1

# 二、Vue创建项目

# 2.1 Vue2

前端主要使用到Vue项目，UI框架使用ElementUI，异步通信Axios

  1. 创建webpack项目 (cmd以管理员方式运行)
vue init webpack vue-demo 或者
vue create vue-demo
1
2
  1. 安装，运行，执行完，vue项目初始化完成了
cd vue-demo
npm install
npm run dev
1
2
3
  1. 安装router（展示一下安装）
npm install vue-router --save
1

# 2.2 Vue3

  1. 初始化vue3项目 npm init vue@latest

npm config set registry https://registry.npm.taobao.org # 淘宝镜像


PS C:\Users\biubiu\Desktop\Vue3> npm init vue@latest   # 使用npm初始化项目

Vue.js - The Progressive JavaScript Framework

√ 请输入项目名称： ... ufs-vue3
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是

正在构建项目 C:\Users\biubiu\Desktop\Vue3\ufs-vue3...

项目构建完成，可执行以下命令：

  cd ufs-vue3
  npm install
  npm run dev

PS C:\Users\biubiu\Desktop\Vue3> cd ufs-vue3
PS C:\Users\biubiu\Desktop\Vue3\ufs-vue3> npm install    # 慢的话 使用淘宝镜像 npm install

added 29 packages in 10s
PS C:\Users\biubiu\Desktop\Vue3\ufs-vue3>npm run dev
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
  1. ElemenuUI
npm install element-plus --save
1
  1. Axios
npm i axios -S
1

# 三、前端UI框架

Element UI: https://element.eleme.cn/#/zh-CN (opens new window)

View UI: https://www.iviewui.com/ (opens new window)

# VS Code

插件推荐

  1. open in browser 安装下面的live server即可 和下面效果一样
  2. live server
  3. Official Dracula Theme

←