vue环境配置及基本概念-蒲公英云

环境配置

一路next安装
打开cmd查看是否安装成功
如果没有cnpm则手动安装安装淘宝镜像
搜索淘宝镜像
复制以下指令

$符号gitbash命令，在cmd窗口不需要输入
4.安装vue环境

5.安装完成后查看是否安装成功vue回车，如果安装失败则继续安装脚手架cli(命令行工具)

npm install —global vue-cli

安装完成

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

全文件版本下载：

vue init webpack vue01

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

简单版本下载

vue init webpack-simple vue02

再安装依赖

cnmp install

安装成功后在左侧资源管理器看到新增的node_modules
在这里插入图片描述
安装成功后

cnpm run dev

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

文件内部各个包的意义

在这里插入图片描述

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
　　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)
})

el官方解释：为实例提供挂载元素。值可以是 CSS 选择符，或实际 HTML 元素，或返回 HTML元素的函数。这里就通过index.html中的

中的id=“app”和这里的“#app”进行挂载。

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：项目的安装依赖

其他概念！！十分详细的代码讲解

安装less(参考webpack.config.js)

npm install less less-loder —save-dev

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

在这里插入图片描述

运行dev查看有没有报错

cnmp run dev

基本概念

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

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

安装vue；检查版本时要大写V
命令行工具（CLI）

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

npm install vue-cli -g

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