Vue2.0已经更新至Vue3及以上了，版本逐步趋于稳定
Vue官方推特.png 保存日期：Vue 3 将于 2022 年 2 月 7 日星期一成为新的默认版本。
一、前端Vue.js环境配置参考
一、项目创建
1.0、使用webpack创建项目
vue init webpack my-project(项目名字)
使用上面webpack命令创建项目之后会询问你项目相关信息
? Project name my-project //设置项目名称
? Project description my-project app //设置项目描述
? Author Martyr //设置作者 直接确定就行了，一路扛戳
? Vue build standalone //使用标准的文件或是压缩过的文件（标准）
? Install vue-router? //是否安装vue-router（路由）填Yes
? Use ESLint to lint your code? //是否使用语法检查器（检查十分严格） 填No
? Pick an ESLint preset Standard //用何种（选择标准即可） 选择No
? Set up unit tests //是否使用单元测试 填NO
? Setup e2e tests with Nightwatch? //是否使用e2e测试 填NO
? Should we run `npm install` for you after the project has been cre
ated? (recommended) npm //是否需要现在通过npm或yarn帮你配置项目，或是稍后你自己动手安装
安装完成后出现运行项目的相关提示：
终端截图如图.png
1.0、使用CLI创建项目(vue create)
To create a new project, run:
vue create hello-world
系统将提示您选择一个预设。您可以选择带有基本 Babel + ESLint 设置的默认预设，或者选择“手动选择功能”来选择您需要的功能。
image.png
选择vue3即可
image.png
自动创建好，非常滴快哈，比webpack快好多哈。
二、Vue2和Vue3项目结构对比及框架注释
2.0、Vue3项目结构
Vue3项目结构.png
Vue3界面是不是感觉简洁明了，没有Vue2的冗余。
2.1、Vue项目基础框架介绍
1、build：目录是一些webpack的文件，包括运行开发环境，项目打包等配置文件。(Vue3之后就看不到了)
2、config：是vue项目的基本配置文件，webpack和node基础，开发、线上环境的配置。
3、dist：是webpack打包后生成的静态文件目录。
4、node_modules：是项目依赖的JS包。
node_modules文件夹下才是npm实际安装的确定版本的东西，这里面的文件夹结构我们可以称之为物理树（physical tree）
5、favicon.ico：图标文件
6、index.html: 主页 (Vue3->public目录下)
7、src：项目目录，源码文件夹，基本上文件都放在这里。
8、assets： 资源文件夹，里面放一些静态资源(图片)。
9、components目录：项目开发的Vue组件
10、App.vue: 。
11、main.js: 。
12、.gitignore: 用来过滤一些版本控制的文件，比如node_modules文件夹 。
13、babel.config.js：Babel是一个JS编译器，主要作用是将ECMAScript2015+版本的代码，转换为向后兼容JS语法，以便能够运行在当前和旧版本的浏览器中或其他环境中。Vue3.0项目中目录中存在babel.config.js文件，即为Babel的配置文件，作用于整个项目。
14、package-lock.json：记录了node_modules目录下所有模块的具体来源和版本号以及其他的信息。
package-lock.json可以理解成结合了逻辑树和物理树的一个快照(snapshot)，里面有明确的各依赖版本号，实际安装的结构，也有逻辑树的结构。
15、package.json：项目文件，记录当前项目所依赖模块的版本信息。
package.json里面定义的是版本范围（比如^1.0.0），具体跑npm install的时候安的什么版本，要解析后才能决定，这里面定义的依赖关系树，可以称之为逻辑树(logical tree)。
16、README.md :描述文件。
三、Vue3 Router使用记录
用 Vue.js + Vue Router 创建单页应用，感觉很自然：使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。
网友评论