vue入门配置并设置公网ip访问
下载安装
注释快捷键：ctrl+/
方式一：CDN引入
部署时可使用
方式二：源码引入
从源码引入方便学习
开发环境：http://vuejs.org/js/vue.js
生成环境：http://vuejs.org/js/vue.js
方式三：npm安装
windows一般选择msi安装。
arch查看CPU指令集架构。x86 or arm
linux下载安装包解压设置软连接
tar -xf /home/sofoware/node-v16.11.1-linux-x64.tar.xz -C /usr/lib/nodejs/
mv node-v16.11.1-linux-x64/ node-v16.11.1
ln -s /usr/lib/nodejs/node-v16.11.1/bin/node /usr/local/bin/
ln -s /usr/lib/nodejs/node-v16.11.1/bin/npm /usr/local/bin/
权限不够，需要给文件夹属性中给user添加所有权限
安装流程参考：windows下npm安装vue - liluxiang - 博客园 (cnblogs.com)
修改了配置文件，默认下载路径改变：
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
配置文件夹C:\Users\killens\.npmrc
查看node安装是否成功
node -v
查看npm安装是否成功
npm -v
使用npm安装vue以及组件
npm config set registry=http://registry.npm.taobao.org 配置镜像站
npm install vue -g
npm install vue-router -g
npm install vue-cli -g
vue -V 查看版本
npm太慢使用cnpm安装
cnpm使用npm通过淘宝镜像安装
npm install -g cnpm --registry=https://registry.npm.taobao.org # 报错不影响后续
ln -s /usr/lib/nodejs/node-v16.11.1/bin/cnpm /usr/local/bin/cnpm # 随后配置软连接
cnpm install -g vue-cli
ln -s /usr/lib/nodejs/node-v16.11.1/bin/vue /usr/local/bin/vue # centos安装vue后配置软连接
使用vue创建项目
切换到项目目录后使用命令
vue init webpack mysite
初始化参数如下设置：
进入当前项目：cd mysite
安装项目依赖：
npm install 或 cnpm install
npm run dev 或 cnpm run dev
浏览器输入localhost:8080看到如下界面即可
项目打包
新开窗口，切换到项目下：cd D:\Files\Vue\mysite
npm run build将项目打包
将index.html中的绝对路径改为相对路径在浏览器可打开页面
VS code使用
Download Visual Studio Code - Mac, Linux, Windows
1.基础语法
涉及vue的生命周期
el:挂载点
作用范围：el所在元素及内部元素内部
使用其他的选择器：默认使用id（通过#访问）选择器。当然class（通过.访问）、甚至div本身都可以访问。建议使用id选择器，因为一般将id设置成唯一。标签的改变并不影响id的挂载。不能挂载body以及html标签。
设置其他的dom元素：
data：
其中可以定义变量，数组，键值对。数组通过[]访问，键值对等对象类型通过.可以访问。
vue实例是将h5页面某一部分当作整体（使用id或其他作为挂载标识管理整体），动态管理其中的元素。vue管理的元素一旦改变，页面自动刷新。
methods：
v-on@click对应的方法写在这里
生命周期相关
creat：
vue被创建时执行的方法，一般在这里进行http请求，获取数据赋值给data中的数据，从而进行展示。
mounted:
修改元素
1.通过vue类实例点属性的方式修改
vue语法：
网页无法正常显示时，可检查网页源码提示的错误。
mustache（双大括号）：
括号内不仅可以写变量，也可以写变量表达式
v-once：对于其中内容只做一次修改。
v-text可达到同样的效果，但是因为不够灵活，更多使用mustache（双大括号）。
v-pre可以将其中的内容原封不动的进行展示，而不做任何vue或html解析。
v-cloak：vue未替换原html界面内容时，不显示原html内容（默认显示）。
内容绑定，事件绑定
v-test，与id，class类似，这是vue支持的标签属性，直接设置标签的内容。同时可以使用字符串的拼接。
v-html，可以将文本中的标签解析成对应的标签功能。这里可以设置链接跳转。a标签中href为http reference的缩写。
v-on，绑定事件方法。一般配合input标签，type，value，属性。可通过this修改data中的元素值
v-on可以绑定click、monseenter、dblclick。所对应的方法写在data的methods中
例：
<input type="button" value="事件绑定" @click="eat">
<h2 @click="eat">{{food}}
显示切换，属性绑定。除了绑定模板内容，可以绑定属性。
v-show，样式在，控制是否显示，频繁切换状态用。
v-if，false时从标签中移除，控制样式。偶尔用。
v-bind
对于img标签，要动态绑定属性src（图片地址），需要用v-bind修饰src，此时vue才会解析scr中的变量字符串
除了绑定img的src，a标签的href，也可绑定div的class属性
除了使用v-bind：src也可使用缩写：src
列表循环，表单元素绑定
v-for
v-on
v-model
D:\software\Install\unity\2020.3.20f1c1\Editor\Data\PlaybackEngines\AndroidPlayer\OpenJDK
2.组件开发
vue作为渐进式框架，可以将应用的一部分嵌入其中。也可以使用vue及其生态，core+ vue+router+vuex.
组件是可复用的 Vue 实例
npm安装后，通过import Vue from “vue”即可
实际开发中一般不修改index.html的内容（可以修改，但不建议），对页面内容的修改放在Vue实例的template属性中，vue编译时会将其中的内容放在el所绑定的div标签中。进一步，可以将vue实例中的template、data、methods等内容放在其他app中管理，只需在原vue实例中绑定相应的组件component并使用template进行引用即可。最终vue实例被简化为如下结构
h5页面的代码，以及vue中对于h5页面的管理script代码放在组件App中，此后任何页面想用此功能使用引用该组件名称（组件须导出名称才能使用）即可。
h5页面代码放在App组件的template中，vue管理页面的script放在App组件的script中。当然css代码也可放在组件中。
index.html为网页入口，其中绑定了对应id的组件，由main.js配置，一般绑定APP.vue，APP.vue中可以放多个网页的通用部分，其他部分通过路由进行占位。
路由通过index.js配置，路由配置不同网页的可重复性组件。
3.CLI详解
帮助搭建项目所需的环境，包括webpack以及依赖。
使用.vue开发，使用润time-only方式开发，若仍使用template标签，使用编译形式
export
new Vue(){
}
执行npm run dev时执行了node build/build.js文件
目录结构：
build、config：配置文件
node_moudle：项目所需的依赖
dist：最后构建生成的代码
src：自己写的源码，包括html、css、js、vue等文件
static：静态文件，如图片，音视频等，打包时会全部拷贝到dist文件中
cli3中目录结构有较大不同
4.router（处理页面与url之间的映射关系）
之前，网页渲染由后端完成，路由也是后端完成，后端要处理页面与url之间的映射关系。
随着Ajax的出现，前后端进行了分离，后端只提供API返回数据，前端通过Ajax获取数据，并进行渲染。由此，前端专注与页面与交互，后端专注于数据库。
前端路由：一次下载所有资源，配置url与页面的对应关系即可。
在前端改变其地址hash值，域名地址会发生改变，但不会向服务器请求资源。这就是前端路由改变的机制。
上述方式地址中有#，或可改变地址history值达到相同效果，使用history.pushState({}," ",about")，此时没有#。
配置映射关系
导入时，默认寻找目录下的index.js文件。
import router from './router'
意思从'./router/index.js'中导入router组件
5. vuex：对于多个vue组件的变量进行集中管理
6.网络封装
Ajax：jQuery的ajax需引入jQuery。推荐使用axios
请求方式：
7.项目实战
8.项目部署
设置公网访问
1.设置服务器端口访问规则。django设置8889，vue设置8070/8888
2.修改 项目名/config/index.js中16,17行，修改为0.0.0.0 和8070端口。
3.在项目目录下的/build/webpack.dev.conf.js 的文件添加disableHostCheck: true
利用webpack进行项目打包
旧版安装：
全局安装：cnpm install webpack@3.6.0 -g
设置软连接：ln -s /usr/lib/nodejs/node-v16.11.1/bin/webpack /usr/local/bin/webpack
局部安装(项目开发时使用)：cnpm install webpack@3.6.0 --sava-dev(表示开发时依赖)
安装后会在该文件夹生成node module相关依赖
新版安装：4以上将cli分离，须同时安装vue-cli
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
webpack采用模块化思想，支持不同类型模块与其之间的依赖关系，写好的代码打包后，将index.html指向dist中可以直接用浏览器打开的界面即可。
修改webpack默认配置。
打包除了用webpack，更常用npm run build构建
命令映射：
npm run build/dev 等于运行package.json中的script中的命令
打包css需要合适的加载器，通过npm安装：npm install--sava-dev css-loader
css loader只负责加载，还需style-loader将模块样式添加到dom
