vue的介绍、vue环境安装以及项目目录介绍

迷南。 2023-05-29 02:56 183阅读 0赞

##### 一、 vue的介绍 #####

###### 1. MVVM ######

> 在vue中，M代表的是数据层，V代表的是视图层，VM实际上是vue实例对象。MVVM并不是取代了MVC,vm只是把c中的展示视图的功能抽取出来，其余视图操作业务还是放在c中  
> ![在这里插入图片描述][20191107203349660.png]  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70]

###### 2. 组件理解 ######

> 1.  图2中标注的部分代表的都是App.vue这一组件，在项目中的`main.js`中`new Vue({})`，得到一个vue的实例对象。其中`el`与`index.html`中的`id="app"`相匹配，`template`：`<App/>`代表将该模板渲染到`index.html`的`id=app`的标签中（在最初没有用vue-cli创建的项目中，每个页面的结构如下，实际上用vue-cli创建的项目也和最初未用其创建的项目结构相同，不过是将`js`和`html`部分分开写了）
> 2.  在通过不同的方式创建项目时，不使用`-simple`的方式创建，在`main.js`中以图2方式创建vue实例，使用`-simple`的方式创建，在`main.js`无`template`，只有`render:h=>h(App)`。实际上两者实现的效果是相同的。在生命周期中，会在`create`之后`beforeMount`之前判断是否有`template`，如果有则将模板传入`render`函数中，`render`函数将模板挂载在页面上（见图三）。
> 3.  整个项目只有一个`Vue`实例，其余组件都最终会被组合到`App.vue`中，然后被`render`函数渲染到页面上  
>     图1：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 1]  
>     图2：  
>     ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 2]  
>     图三  
>     ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 3]

##### 二、项目环境安装 #####

###### 1. 安装所需插件 ######

`vutur`、`HTML CSS Support`、`JavaScript(es6)`、`open in browser(浏览器跳转)`、`Vue 2 Snippets`…

###### 2. 安装环境、配置 ######

① 安装node(在安装node时会自动安装npm)  
② 检查是否有cnpm(在cmd命令窗口下输入cnpm检查)，若没有，则需要安装淘宝镜像  
![在这里插入图片描述][20191101213944862.png]  
③ 安装`vue`:`cnpm install vue`  
④ 安装`vue-cli`:`cnpm install -g vue-cli`（在未安装`vue-cli`时可能会无法查看vue版本/vue不存在的问题）  
⑤ 查看vue版本，确保vue安装成功：`vue -V`

> 几点疑问以及解答：
> 
> 1.  npm是什么？  
>     `npm:Node Package Manager(包管理器)`。它最大的作用是共享代码。当项目中需要的依赖多时，需要引入的依赖包就会变多。此时npm会显得很重要。项目中需要的依赖包可以在代码仓库（代码仓库中存放所有共享代码）中下载，即通过npm下载（当然，仓库必须有这些共享包。这需要各个包的作者将包上传到该代码仓库中，并给其取名。从代码仓库中下载时根据作者起的名称来下载）。下载完的代码会出现在node\_modules目录下，项目便可以使用了。
> 2.  vue工程中为什么要下载node?  
>     实际上vue.js是库不是框架。可以直接下载`vue.js`而不是通过`npm install vue`的方式下载`vue.js`。但由于在开发中，用到的包依赖越来越多，一个个导入很麻烦，所以用到打包工具比如==webpack（node.js中的构建工具）==以及`npm`，可以直接require引入之后将不同模块打包成单个js文件。同时这些工具提供各种自动化处理。让前端开发更方便。
> 3.  node.js和npm的关系  
>     node.js是javascript的一种运行环境，是对Google V8引擎进行的封装。是一个服务器端的javascript的解释器。node和npm是包含关系。当安装了node.js后，npm也已经安装好了（( Node.js 内置了 npm）。npm是node的包管理器
> 4.  webpack是什么？  
>     webpack是一个工具，这个工具可以帮你处理好各个包/模块之间的依赖关系（modules with dependencies），并将这些复杂依赖关系的静态文件打包成一个或很少的静态文件，提供给浏览器访问使用；除此之外，webpack因为可以提高兼容性，还可以将一些浏览器尚不支持的新特性转换为可以支持格式，进而减少由新特性带来的浏览器的兼容性问题。webpack将你从npm中安装的包打包成更小的浏览器可读的静态资源，这里需要注意的是，webpack只是一个前端的打包工具，打包的是静态资源，和后台没有关系，虽然webpack依赖于node环境
> 5.  `vue-cli`是什么？  
>     `vue-cli`是脚手架工具，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成`vue.js+webpack`的项目模板（从github上下载模板项目）。为现代前端工作流提供了`batteries-included`的构建设置。只需要几分钟就可以运行起来并带有热重载。保存时lint校验，以及生产环境可用的构建版本。
> 6.  `vue-cli`与`webpack`的关系？  
>     `webpack`是前端资源模块化管理和打包工具。它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源，还可以将按需加载的模块进行代码分隔，等到实际需要的时候再一步加载。而它要自动实现这些功能，我们必须要提前编辑好配置文件。`vue-cli`是脚手架工具，其作用就是用配置好的模板迅速搭建起一个工程项目，就省去了我们的手动配置`webpack`配置文件的基本内容。

###### webpack原理图 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 4]

##### 三、创建项目 #####

1.  `vue init webpack 项目名称`
2.  `vue init webpack-simple 项目名称`：该方式创建后没有`node_modules`，需要用命令：`npm install`手动下载

##### 四、项目目录介绍 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 5]

###### 1. package.json:项目配置文件 ######

> 当前应用的描述文件。其中有运行时依赖和开发时依赖。

① scripts中的dev为项目启动内容(其中包含着加载的文件、加载的项目内容，故在运行时写的为：npm run dev)  
② dependencies中为当前项目使用的文件（插件），其中^代表版本可升。\*代表版本不可升。 devDependenies中为支撑项目成功启动的文件（插件）  
③ 当把项目拷贝给另一台机器时，项目打开时会自动下载devDependenies中的插件，而不会自动下载dependencies内的插件。

###### 2. `build.js` ######

> 该文件是打包时使用的，当需要将项目打包时，运行`npm build`

###### 3. `main.js` ######

> 该文件是主入口文件（在build文件夹下的`webpack.base.conf.js`中有配置主入口文件）  
> ![在这里插入图片描述][20191107174529241.png]

###### 4. `webpack.config.js` ######

> 在该文件的`module`的`rules`中配置相关`loader`。eg:当下载了`less`以及`less-loader`后，若要解析`less`文件，还需要在`rules`下进行配置。  
> ![在这里插入图片描述][20191101224836947.png]

###### 5.`.babelrc`:rc->run control 运行时控制，babel的控制文件 ######

> 1.  es6转es5 2. jsx转js

###### 6. `.eslintignore` ######

> 在其中配置不被eslint检测的文件：可以直接写文件夹/文件

###### 7. `config` ######

> `config`里面的`index.js`配置指定的后端服务的端口号和静态资源文件夹  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 6]

###### 8. `static` ######

> static里面放置静态资源和全局css,当webpack打包后在src中的资源路径改变，static的资源路径不变

###### 五、在写代码时几点注意事项 ######

> 1.  若要引入文件：`import Vue from 'vue'`(可省略.js后缀)。若引入组件：`import 组件别名 from '组件地址'`（写组件地址时可不写.vue后缀）
> 2.  每一个组件中只能有一个父元素，组建中可写html,js,css
> 3.  `export default`：暴露出当前组件，其中name为当前组件的名称，data是整个组件的数据域，里面包含组件的数据。
> 4.  若给`<style></style>`标签里添加`scope`，则规定当前样式只作用域当前组件。
> 5.  工程解析`less`需要准备的步骤：解析`less`文件需要`less`，还需要`less-loader`。股为了能够解析less,需要下载`less`以及`less-loader`。  
>     ① 安装`less`：`cnpm install less --save-dev`(dev代表装到dependencies中)  
>     ② 安装`less-loader`:`cnpm install less-loader --save-dev`  
>     ③ 安装完毕后在`webpack.config.js`中`module`的`rules`中配置解析代码：  
>     ![在这里插入图片描述][20191101224836947.png]  
>     ④ 写完解析代码后需要在组件的`<style></style>`中添加属性`lang="less"`,即`<script lang="less"></script>`。若要引入外部less文件，则需要`@import url("less文件地址")`

[20191107203349660.png]: https://img-blog.csdnimg.cn/20191107203349660.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191107203138928.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191107201659302.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2019110720095838.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191107202724422.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng==,size_16,color_FFFFFF,t_70
[20191101213944862.png]: https://img-blog.csdnimg.cn/20191101213944862.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191107114159920.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191107173445819.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng==,size_16,color_FFFFFF,t_70
[20191107174529241.png]: https://img-blog.csdnimg.cn/20191107174529241.png
[20191101224836947.png]: https://img-blog.csdnimg.cn/20191101224836947.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191107175807245.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng==,size_16,color_FFFFFF,t_70