vue环境配置及基本概念

待我称王封你为后i 2023-06-12 06:25 2阅读 0赞

### 环境配置 ###

1.  一路next安装![在这里插入图片描述][20191031214610147.png]
2.  打开cmd查看是否安装成功  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]
3.  如果没有cnpm则手动安装安装淘宝镜像  
    搜索淘宝镜像![在这里插入图片描述][20191031215329751.png]  
    复制以下指令  
    ![在这里插入图片描述][20191031215333221.png]  
    $符号gitbash命令，在cmd窗口不需要输入  
    4.安装vue环境  
    ![在这里插入图片描述][20191031215556459.png]  
    5.安装完成后查看是否安装成功vue回车，如果安装失败则继续安装脚手架cli(命令行工具)

npm install --global vue-cli

安装完成

### 在vs中创建自己的第一个工程 ###

1.  全文件版本下载：

vue init webpack vue01

根据提示信息回车或者选择性的填写  
名称（回车）、工程描述、作者、一路回车、到ESDLint to lint your code 是否监听你的代码，选择no、回车  
![在这里插入图片描述][20191031220302119.png]  
其中yarn相比npm的优势为速度更快，其他语法类似

1.  简单版本下载

vue init webpack-simple vue02

再安装依赖

cnmp install

安装成功后在左侧资源管理器看到新增的node\_modules  
![在这里插入图片描述][20191101001537685.png]  
安装成功后

cnpm run dev

显示本地窗口号  
![在这里插入图片描述][20191101001811517.png]  
搜索之后显示成功建立的vue文件

### 文件内部各个包的意义 ###

![在这里插入图片描述][20191101174601663.png]

> 1.build文件夹：打包配置的文件夹  
> 　　1.1 webpack.base.conf.js ：打包的核心配置  
> 　　1.2 build.js：构建生产版本，项目开发完成之后，通过build.js打包（加载base与prod，读取完之后通过webjpack命令对项目进行打包）  
> 　　1.3 webpack.prod.conf.js：被build.js调用，webpack生产包的一个配置。基础代码都在1.1里面写，1.3是对1.1的扩展与补充  
> 　　1.4 dev-client.js：热更新的插件，进行对客户端进行重载  
> 　　1.5 dev-server.js：服务器。（背后的原理是启动一个express框架，这是一个基于node做的一个后端框架，后端框架可以在前端起一个服务）  
> 　　1.6 vue-loader.conf.js：被base加载，  
> 　　1.7 utils.js：工具类，公共的配置 config文件夹：打包的配置，webpack对应的配置  
> 2.config：保存项目初始化的配置  
> 3.index.js：可与1.1合并成一个文件，但由于`spa`想做一个清晰的架构，因此把它们拆分开了  
> 4.src文件夹：开发项目的源码  
> 　　4.1 assets 用来放置图片等资源的  
> 　　4.2 components 用来放置组件文件  
> 　　4.3 app.vue 是项目的入口,相当于一个组件  
> 4.3.1 app.vue中的data![在这里插入图片描述][20191121162542914.png]  
> 　　4.2 main.js 是项目的核心文件  
> new Vue代表新建vue对象

### main.js ###

import Vue from 'vue' //引入vue
    import App from './App.vue'  //引入组件
    /*el:关联的元素 */ 
    new Vue({ 
      el: '#app',
      render: h => h(App)
    })

> 1.  el官方解释：为实例提供挂载元素。值可以是 CSS 选择符，或实际 HTML 元素，或返回 HTML元素的函数。这里就通过index.html中的
>     
>     中的id=“app”和这里的“\#app”进行挂载。
> 2.  `import...from...`的from命令后面可以跟很多路径格式，若只给出vue，axios，less这样的包名，则会自动到node\_modules中查到，找到后则加载；若给出相对路径及文件前缀，则到指定位置寻找；可以加载各种各样的文件js、.vue、.less等等。

问题

> VUE是如何加载main.js文件的  
> 在工程文件中使用main.js来加载App.vue文件的，但没有代码写出来加载main.js的，而index.html中只有一个自定义标签app，那么工程是如何加载到main.js文件的呢？

解答:

> 如果是用vue.js官网提供的脚手架工具并沿用默认配置的话，你执行`npm run dev`的时候会出来页面，是因为你根目录下的`package.json`文件里`script`配置了`"dev": "node build/dev-server.js"`，也就是其实执行的是`dev-server.js`这个文件，里面有定义`var webpackConfig = require('./webpack.dev.conf');`因为我们这个脚手架工具里是用webpack来打包项目文件的，依赖的`webpack.dev.conf`文件里又定义了`var baseWebpackConfig = require('./webpack.base.conf');`在这个依赖`webpack.base.conf`文件里面`entry`入口文件就配置了`app: './src/main.js'`，所以当你运行`npm run dev`的时候就从`main.js`这个入口文件开始执行了

> static文件夹：静态资源，图片 .babelrc：ES6解析的配置  
> .gitignore：忽略某个或一组文件git提交的一个配置  
> index.html：单页面的入口，通过webpack的打包构建之后，会对src源码进行编译，最终把它们插入到html里面来  
> package.json基础配置，告诉我们项目的信息（版本号、项目姓名、依赖）  
> node\_modulues：项目的安装依赖

[其他概念！！十分详细的代码讲解][Link 1]  
4. 安装less(参考`webpack.config.js`)

npm install less less-loder --save-dev

安装完成之后还要在webpack.config.js的`rule`中配置解析文件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]  
5. 运行dev查看有没有报错

cnmp run dev

#### 基本概念 ####

1.  `vue`是单页面组件化，比如点外卖时各个环节的星显示都是同一组件
2.  MVVM

> `MVVM`是`Model-View-ViewModel`的简写。它本质上就是`MVC` 的改进版。`MVVM` 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 `ViewModel` 已经帮我们做了，它可以取出 `Model`的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]

1.  安装vue；检查版本时要大写V  
    ![在这里插入图片描述][20191031235844773.png]
2.  命令行工具 （`CLI`）

> 为单页面应用 (SPA) 快速搭建繁杂的脚手架

npm install vue-cli -g

1.  `static`:静态资源目录，可以存放全局css样式或者相对路径（打包后也不会更改）;也可以使用`public`
2.  `template`组件中只能有一个父元素
3.  在`style`中写`scope`时声明局部变量
4.  （安装时要装在dev中 即在—save后在加-dev）  
    ![在这里插入图片描述][20191101000226362.png]
5.  ctrl+c关闭当前项目 cls清屏
6.  shift+alt+f 格式化
7.  vue中使用`less`，先安装less,再安装less加载文件，配置文件 `webpack configs.js` ，在`module`中添加类似已有文件的规则；在当前组件中引入外部css样式时使用`<style lang=”less”>;`
8.  crtl+shift+p 打开设置命令行
9.  shift+Alt+f 格式化文档

[20191031214610147.png]: /images/20230531/15a6ee7011704fd1a174789746b4eb78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]: /images/20230531/2b9e3bd41aee45c7ae9888357d4d9353.png
[20191031215329751.png]: /images/20230531/bc58cd6bdb48418698efe54806884ba3.png
[20191031215333221.png]: /images/20230531/44b331c3885c400fb06c4cf23e4c95b0.png
[20191031215556459.png]: /images/20230531/4417e9cacf634489bfa47cfd302e9cd1.png
[20191031220302119.png]: /images/20230531/4a1f751a70144657850c9255fe6c114d.png
[20191101001537685.png]: /images/20230531/fa2db3184cd243e192875c5fb0071152.png
[20191101001811517.png]: /images/20230531/fa9b12a83f724f659b1d3dbec9efa6f0.png
[20191101174601663.png]: /images/20230531/de0bc57eecdb4b109fdec4561b077620.png
[20191121162542914.png]: /images/20230531/ffc0a9032c93409fb3c906d1f16f85c1.png
[Link 1]: https://www.jb51.net/article/128838.htm
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]: /images/20230531/c4bf564f96f04b17b143085ec0cb74ea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]: /images/20230531/213486bcadc9480497f985c5fc0487e6.png
[20191031235844773.png]: /images/20230531/47a90a7594da436dbf1972ac79b908a2.png
[20191101000226362.png]: /images/20230531/b376592a180341d5993a5d31efb1cda8.png