Vue3使用梳理

2022-02-14 本文已影响0人纵昂

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: $\color{blue}{项目的根组件}$ 。
11、main.js: $\color{blue}{项目入口文件}$ 。
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 在哪里渲染它们。