浅显易懂，使用vue-cli3创建项目(新手入门)

前言：

区别：vue2.0中不管数据多大，都会在一开始就为其创建观察者；当数据很大时，这可能会在页面载入时造成明显的性能压力。而vue3.0只会对“被用于渲染初始可见部分的数据”创建观察者，而且vue3.0的观察者更高效。

        vue3.0 的发布与 vue2.0 相比，优势主要体现在：更快、更小、更易维护、更易于原生、让开发者更轻松。

查看脚手架版本：

  vue 脚手架版本 一定要高于4.5.0版本才支持创建vue3.0项目。

 命令行输入：vue -V

创建项目：

先打开命令行窗口，cd 进入你要创建项目的文件夹

vue create 项目名

 vue create vue3-app   // 这里的 vue3-app 是项目名，点击回车

回车后出现类似如下页面（上面的绿框框不用管，是它提示我更新脚手架）

 Default (Vue 3) ([Vue 3] babel, eslint)(默认配置 提供babel或者eslint支持)
Manually select features(手动选择项目特性)

我们可以通过上下键来选择我们需要的，一般我们都会选择手动配置 

选择手动配置后回车，进入下一步

回车后会出现下面的类似页面

注意：使用键盘上下键切换，空格选中，选完之后再按回车

 注意：

文章中有两种不同的步骤，就是关于（Linter / Formatte）是否选择的，下文两种选择都会列举，各位朋友仔细看，不要弄错了，原因可以看我的 另一篇文章

 选择（Linter / Formatte）完成后回车

相关配置的简单介绍如下

• Babel 主要是对es6语法转换成兼容的js （选上）
• TypeScript 支持使用TypeScript语法来编写代码
• Progressive Web App (PWA) Support [把网页做的更像原生app]
• Router 支持vue路由配置插件（一般都会选择）
• Vuex 支持vue程序状态管理模式 (一般都会选择)
• CSS Pre-processors 支持css预处理器 （一般都会选择）
• Linter / Formatter 支持代码风格检查和格式化 （选上）
• Unit Testing 单元测试
• E2E Testing E2E测试

 

出现如下页面，这里我们选择 3.x，回车

选择 3.x 回车后下一步

 出现如下页面：

 这里的意思是问你本次项目是否采用history模式，如果选择Y,需要后台配置具体看 vueRouter官网解释，这里选择 n，即不采用history模式

 选择 n 后回车

出现一下页面：

 这里的意思是问你选择哪一种CSS预处理语言，这个可以根据个人的代码习惯选择，这里选择Less

 选择css预处理语言后回车

出现以下页面：

 这里的意思是选择一种格式化代码方式：可以选择 ESLint + Prettier

 选择格式化代码方式后回车

出现以下页面：

    这里的意思是问你什么时候进行代码规则检测，我一般会选择保存就检测，也就是Lint on Save

 选择后回车

出现以下页面：

    这里的意思是将Babel,PostCSS,ESLint这些配置文件放哪，通常我们会选择放到独立位置，让package.json文件更干净整洁，所以选择第一个

选择完成后回车

出现以下页面：

 这里是问你是否保存这次配置选择，这里我选择保存

保存之后会让你为这次配置起一个名字，这样下次可以直接快速配置选择，这里我起的名字是common

最后回车后就会初始化项目了

 完成后结果如图：

 不选择（Linter / Formatte）

下面是不选择（Linter / Formatter）的步骤，下面的配置选择与上文是不完全相同的，请大家注意，原因可以看 我的 另一篇文章

 不选择（Linter / Formatte），完成后回车

这里选择的是 2.x

 选择 2.x 后 回车

  这里的意思是问你本次项目是否采用history模式，如果选择Y,需要后台配置具体看 vueRouter官网解释，这里我门选择y，即采用history模式

采用history模式后回车 

 这里的意思是问你选择哪一种CSS预处理语言

这里我选择第一个，即Sass/SCSS (with dart-sass)

选择css预处理器后回车 

 这里的意思是将Babel,PostCSS,ESLint这些配置文件放哪，通常我们会选择放到独立位置，让package.json文件更干净整洁，所以选择第一个

 选择完成后回车

 这里是问你是否保存这次配置选择，这里我选择不保存

因为后面使用 vue create xxx  创建项目基本都是自己手动选择（这样比较有仪式感）

最后回车后就会初始化项目了，后面的步骤就都一样了

 启动项目

根据提示 进入 cd 进入项目文件夹

 注意：

vue2创建项目后还需要 npm install 安装所需模块

但vue3初始化项目它自带了 node_modules

 vue 2 运行命令： npm run dev

vue 3 运行项目 : npm run serve

 这里执行命令 npm run serve 后如下：

现在 可以点击按住ctrl在浏览器打开，或者复制后在浏览器打开

   路径里的 “#” 是创新项目的时候 没有选择history的原因，可以在代码里配置好路由

停止运行

停止运行的操作 和vue2 类似，都是 ctrl + c 

---

本人初次接触vue3，文章如有错误，恳请大家提出问题，本人不胜感激

文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力     长路漫漫，道阻且长     

转载请注明出处：https://blog.csdn.net/qq_52855464/article/details/124764039?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22124764039%22%2C%22source%22%3A%22qq_52855464%22%7D&ctrtid=eE2mt