新建过程
- 必须先安装node.js ,我因为是用electron-vue打包
- npm install -g @vue/cli
- vue create <新建项目名称>
-
按照以下图片勾选配置,选择初始化方法
1658132104088.png
- Default ([Vue 3] babel, eslint)：默认预设配置，会快速创建一个[Vue3.0]
- Default ([Vue 2] babel, eslint)：默认预设配置，会快速创建一个Vue2.0项目，提供了babel和eslint支持
- Manually select features：手动配置项目，可根据项目的需要选择合适的选项，具备更多的选择性
-
选择插件配置
1658133305098.png
- Babel：使用Babel将源码进行转码（把ES6=>ES5）
- TypeScript：使用TypeScript进行源码编写。使用TypeScript可以编写强类型JavaScript
- Progressive Web App (PWA) Support：使用渐进式Web应用程序
- Router：使用Vue路由
- Vuex：使用Vuex状态管理器
- CSS Pre-processors：CSS 预处理器（如：less、sass）
- Linter / Formatter：使用代码风格检查和格式化（如：ESlint）
- Unit Testing：使用单元测试（unit tests）
- E2E Testing：使用E2E（end to end）黑盒测试
-
选择项目版本
1658133459212.png - 是否使用history路由模式（默认是hash模式，http://www.abc.com/#/hello，hash的值为#/hello,改变hash值页面不会重新加载,history模式会采用浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求,history模式前后台都要配置）
1658133554507.png -
选择预处理器
1658134032266.png -
选择代码格式化检测工具 这里我用的是eslint+preitter
1658134088137.png
- ESLint with error prevention only：ESLint只会进行错误提醒
- ESLint + Airbnb config：ESLint Airbnb标准
- ESLint + Standard config：ESLint Standard标准
- ESLint + Prettier：代码质量检测+代码格式化工具
-
选择文件配置方式 一般单独生成配置文件
1658134223663.png -
是否包成vue生成模板，方便后期快速搭建项目
image.png
vue3.0跟vue2.0的变化
全局挂在属性的变化 vue2.0
vue.prototype.$axios
全局挂在属性的变化 vue3.0
Vue.config.globalProperties
引用vue全局对象的变化vue2.0
import Vue from 'vue';
Vue.use(globalCoilInfo);
引用vue全局对象的变化vue3.0
import { createApp } from 'vue'
const app = createApp({})
