VUE 3.X 开发 —— 开发环境搭建

工欲善其事必先利其器

前序：

• VUE-官网-3.X

前提：

• 鉴于web的直观性和多样性，更多是选择web而不是控制台创建项目，当然后续生产上更多是不变的模板加工具快速创建
• 和2.X步骤差不多，仅多了版本切换选择
• windos7及以上版本(linux或max环境下的，请自行找教程，大同小异)
• vscode(当然记事本也可，版本不限，只是可能会与本文不太一样，既然记事本都可以，那就不用多于关心这些了，只是可能开发效率没有那么高而已)
• Vue CLI 4.5 +(当前版本 v4.5.8，特别要注意，若不是这个，慎重看此文)
• Node.js (本文当前版本 v12.18.3，node的适用版本也需要注意)未安装请看其他相关教程，此文默认已安装
• 搬运官网文档的三种安装方式，其中灵活性依然为cli和web，新手推荐web，vite没有相关的选择，简洁模板可以选择它，或者自己创建好，然后利用版本工具作为模板快速共享均可

一：步骤：

1 —— 命令行方式创建项目：

前奏 —— 使用npm(依赖包管理工具)安装 Vue CLI

// 若已安装，除非版本一致，否则此命令将会重装最新版
      npm install -g @vue/cli

1. 切换项目所在位置

I:
     cd I:\VuePro

2. 创建项目 (后缀带上-n为去掉git版本控制，默认以git为版本，如果像我一样是使用svn的就可以加上)

vue create v3-demo
     vue create v3-demo -n

2.0 回车显示结果

// 直接选择Vue 3 Preview 也可，此处选择最后一项，自行配置
Vue CLI v4.5.8
? Please pick a preset:
  config ([Vue 2] router, vuex, less, babel, typescript, eslint)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features

2.1 回车显示结果

// 第一行必选，毕竟需要切换到Vue 3，其他随意，最简demo仅仅显示文字并不需要太多
Vue CLI v4.5.8
? Please pick a preset: Manually select features
? Check the features needed for your project:
>(*) Choose Vue version
 (*) Babel
 (*) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

2.2 回车显示结果

// 毫无疑问选择 3.x 当然你可以重回2.x
Vue CLI v4.5.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with
  2.x
> 3.x (Preview)

2.3 回车显示结果

// 默认选择就不浪费空间放这些不重要的选择过程了
Vue CLI v4.5.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
// 看自己需要是否保存该模板设置，此处自行选择
? Save this as a preset for future projects? Yes
? Save preset as: VUE 3 Base

3. 最后等待创建完成后打开或运行项目

项目文件右键选择 IDE或编辑器 比如 vs core 打开(前提装有对应软件)或者 命令行直接运行项目
 $ cd v3-demo
 $ npm run serve

2 —— vue Web方式创建项目：

前奏 —— 使用npm(依赖包管理工具)安装 Vue CLI

// 若已安装，除非版本一致，否则此命令将会重装最新版
      npm install -g @vue/cli

1. 命令行启动web服务

vue ui

命令运行

1. 0 web页面：

首页

1. 1 创建项目：

详情

预设

功能图一

功能图二

配置

保存预设

完成创建

编译运行

运行结果

3 —— vue vite方式创建项目：

1. 创建项目

npm init vite-app v3-demo

2. 编译运行项目

npm install
npm run dev

3. Edge (其他浏览器需要bable转换)打开项目链接，运行结果：