【Vue基础】VueCLI创建和启动项目&VueCLI生成的项目结构&Vue双向数据绑定的原理

山清水秀林

已于 2022-10-04 16:07:35 修改

阅读量553

点赞数

分类专栏： Web前端框架/插件文章标签： vue.js 前端 javascript

于 2022-10-03 18:00:00 首次发布

本文链接：https://blog.csdn.net/m0_53130738/article/details/127058638

版权

Web前端框架/插件专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1. VueCLI创建和启动项目

使用 VSCode 或 WebStorm 打开一个空文件夹或以前创建项目的文件夹，右键选择在集成终端中打开（Open in Terminal）

或者直接使用cmd，切换盘符，使用cd指令进入文件夹目录（随便什么指令，能进入文件夹就行）。
进入当前文件夹目录后，使用指令：vue create 项目名（区分大小写）
等待一会，期间不要进行任何操作，它会在当前文件夹下新建一个文件夹，名称是自己起的项目名（看不见这个新建的文件夹也没事，继续下一步），下一步需要我们选择自己的项目预设：

? Please pick a preset: (Use arrow keys) 	 // 请选择一个预设，使用方向键
	> Default ([Vue 2] babel, eslint)	 	 // 默认预设 (Vue2版本 babel编译器 eslint工具）
	  Default (Vue 3) ([Vue 3] babel, eslint)// 默认预设 (Vue3版本 babel编译器 eslint工具）
	  Manually select features 		 	   	 // 手动选择要素

我选择自己手动选择要素 ( > Manually select features )，然后会弹出选项：

? Check the features needed for your project: (Press <space> to select, 
<a> to toggle all, <i> to invert selection)
	>(*) Choose Vue version
	 (*) Babel
	 ( ) TypeScript
	 ( ) Progressive Web App (PWA) Support
	 ( ) Router
	 ( ) Vuex
	 ( ) CSS Pre-processors
	 (*) Linter / Formatter
	 ( ) Unit Testing
	 ( ) E2E Testing

按空格键选中或取消选中，a键为全选或全不选，i 键为反向选中。

根据自己的需要选择即可，我的模板是：

	 (*) Choose Vue version
	 (*) Babel
	 ( ) TypeScript
	 (*) Progressive Web App (PWA) Support
	 (*) Router
	 (*) Vuex
	 (*) CSS Pre-processors
	 (*) Linter / Formatter
	 ( ) Unit Testing
	>( ) E2E Testing

选择完成后按下Enter回车键进入下一步，配置具体的属性：

选择vue版本，根据需求选择，这里选择Vue2版本：

? Choose a version of Vue.js that you want to start the project with(User arrow keys)
> 2.x
  3.x

路由是否使用history模式（history模式地址栏不带#号）：

? Use history mode for router？ （Requries proper server setup for index
fallback in production）（Y/n）
  y

选择css预处理器，根据需求自行选择，这里我选择Less:

? Pick a CSS pre-processor （PostCSS， Autoprefixer and CSS Modules are
supported by default）：
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
> Less
  Stylus

选择格式化代码检测的配置，我选择默认第一个（仅具有错误预防功能的ESLint）：

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

选择在什么时候检测代码，我还是选择默认第一个（在代码保存时检测）：

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit (requires Git)

选择配置文件的存放位置，专用配置文件或者package.json，我这里选择package.json：

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
  In dedicated config files
> In package.json

选择是否把此次选择当作未来项目的模板，自行选择即可，我选择保存：

? Save this as a preset for future projects? (y/N)
  y

选择保存为模板后会让你为模板起一个名字，我起的名字是test：

? Save preset as: test

然后就需要静静的等待…

等待它自动安装依赖项完毕后会出现提示：

Vue CLI v4.5.19
✨  Creating project in F:\WebStorm\Vue\001\test.
⚙️  Installing CLI plugins. This might take a while...


added 1338 packages in 41s
🚀  Invoking generators...
📦  Installing additional dependencies...


added 76 packages in 5s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project test.
👉  Get started with the following commands:

 $ cd test
 $ npm run serve

最后一步：

输入指令： cd test 进入新建的项目目录 ( 因为我起的文件夹名字是test，换成你起的即可 )
进入项目目录后，输入指令： npm run serve 运行项目，等待它自动跑完即可

（其实就是看上面的最后两句提示，也不一定是run serve，它提示什么就写什么即可）

运行成功后也会有提示：

 DONE  Compiled successfully in 2186ms                                                                          13:30:35

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.0.00:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

此时在浏览器中进入地址：http://localhost:8080/，显示以下内容即为创建成功！

（如果你是用 VSCode 或者 WebStorm 的集成终端创建的项目，可以直接用Ctrl+鼠标左键进入此页面。）

在这里插入图片描述

2. VueCLI生成的项目结构

node_moudles - 所有的项目依赖项都会下载到 node_moudles
public - 存放公共资源和项目的主入口文件index.html，还有ico图标，public中的文件不会被base64编译
src - 项目核心文件夹：包括项目源码、各种静态资源等等。是我们开发的重点工作目录
assets - 在src目录下，assets文件夹用来存放项目资源，img图片、视频、音频等
components - 在src目录下，components文件夹用来存放组件，一般做子组件，对应views中页面级别的大组件（视图）
router - 在src目录下，存放路由的相关配置
store - 在src目录下，存放Vuex的相关配置
views - 在src目录下，存放页面级别的大组件（视图）
App.vue - App.vue是根组件，所有组件内容都在它里面
main.js - 入口函数
.gitignore - git配置上传时忽略文件
babel.config.js - babel的配置文件，babel主要作用是将ES6+的语法转化为ES5
package-lock.json - 带有-lock是本地的意思，作用和package.json一样，存放项目配置，用于管理项目的依赖项，脚本，版本等。
package.json - 存放项目配置，用于管理项目的依赖项，脚本，版本等。
README.md - 项目介绍文件，对项目的主要信息进行描述

在这里插入图片描述

3. Vue 双向数据绑定的原理：

Vue2版本：

采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。

详解请移步：侯先生的博客
Vue3版本：

Vue.js 3.0的一些新特性中，其中一个很重要的改变就是Vue3 将使用 ES6的Proxy 作为其观察者机制，取代之前使用的Object.defineProperty。

因为Object.defineProperty方法存在一定的局限性，比如它无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应。

详解请移步：傑仔 Vue3.0 双向绑定原理

山清水秀林

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【Vue基础】VueCLI创建和启动项目&VueCLI生成的项目结构&Vue双向数据绑定的原理

输入指令：cd test进入新建的项目目录 ( 因为我起的文件夹名字是test，换成你起的即可 )进入项目目录后，输入指令：运行项目，等待它自动跑完即可（其实就是看上面的最后两句提示，也不一定是run serve，它提示什么就写什么即可）
复制链接

扫一扫