发布时间：2019/09/03 10:56:29 更新时间：2020/07/31 19:49:14
蟒域网是一个彻底的python领域网站，为什么会出现vue呢？
大家知道，python几乎能做一切事情，甚至手机app和嵌入式，但是就是web前端做不了。这一块是html、css、js、前端框架的天下。
python做互联网后端，有非常强大的生态。如果python开发者需要全站开发，我们需要选择一个前端技术。前端技术五花八门、变化又快，我选择了vue。为什么呢？因为vue在理念上有点像python。
谨以此文，介绍作为一个python开发者，怎么简单应用web前端技术。
需要注意的是，我们看vue，需要对html、css、js有最基本的了解。
nodejs官网：https://nodejs.org/en/
nodejs用来调试，也就是说在没有部署到python后端环境上的时候，可以用nodejs充当后端进行快速前端调试。
vue官网：https://cn.vuejs.org/
vue-cli：https://cli.vuejs.org/zh/
bootstrap4：https://getbootstrap.com/
vue官网介绍了四种安装方式：
1、直接下载用<script>标签引入。
2、CDN
3、NPM
4、CLI
官网从学习的角度来说，不推荐初学者用cli。但个人建议，刚开始使用vue，你就用cli。因为这样可以标准化很多东西，让你在做出结果的同时，慢慢理解众多的细节。
1、更新apt
apt-get update
2、安装nodejs。
apt install curl
这个命令是安装node12.x中的最新版本
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install nodejs
查看安装后的版本
node -v
npm -v
npx -v
3、安装vue/cli
npm install -g @vue/cli --registry=https://registry.npm.taobao.org
查看
vue --version
vue -V
进入要创建文件夹的目录，比如：cd /home/
vue create your_vue
敲入这个命令后，有很多步的选择。我这里给出建议的选择方式：
1、
Please pick a preset:
如果选择default（默认），就只装了babel和selint。
建议选择Manually select features（手动）
2、
Please pick a preset: Manually select features
>( ) Babel【用于编写下一代 JavaScript 的编译器】【建议选择】
( ) TypeScript【TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集】【建议不选】
( ) Progressive Web App (PWA) Support【直译是渐进式WEB应用，是结合了一系列现代Web技术的组合。在网页应用中实现和原生应用相近的用户体验。】【建议不选】
优点：
可以将app的快捷方式放置到桌面上，全屏运行，与原生app无异
能够在网络差和断网条件下
推送消息的能力
快速响应用户指令
缺点：
支持率不高
Chrome在安卓移动端上的占有率很低
依赖的GCM服务在国内无法使用
微信小程序的竞争
( ) Router【Vue.js 官方的路由管理器。】【建议选择】
( ) Vuex【Vue.js 的中心化状态管理方案。】【建议选择】
( ) CSS Pre-processors【css预处理】【建议不选】
CSS预处理器定义了一种新的语言，基本的思想是用一种专门的编程语言，开发者只需要使用这种语言进行编码工作，减少枯燥无味的CSS代码的编写过程的同时，它能让你的CSS具备更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。CSS预处理器种类繁多。有Sass、Less、Stylus等。
建议不用，或者选择stylus
( ) Linter / Formatter【格式化代码】【建议选择】
建议选择，选择ESLint + Prettier
选择检查方式：Lint on save（保存就检测）
( ) Unit Testing【单元测试】【建议不选】
( ) E2E Testing【端到端测试】【建议不选】
3、
Use history mode for router?
no
不导入历史模式，每个项目不一样。
4、
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
In package.json
配置文件不要太分散。
5、
Save this as a preset for future projects? (y/N)
no
每次项目不一样，选项没必要存储。
完成后，会出现如下目录：
src：源码开发的地方。
public：favicon.ico等。
node_modules：安装的node组件，这个不需要存档。
package.json：主要配置文件。
package-lock.json：配置文件。
babel.config.js：配置文件。
README.md
而后，我们只需要在src中开发代码，调整结构即可。其它所有文件都是安装命令刷新的。node_modules连入库存档都不需要。
cd your_vue（在有package.json的目录下运行）
运行时需要用到的包使用–save（似乎可省略），否则使用–save-dev。
比如：一般会用到axios等。
npm install axios --registry=https://registry.npm.taobao.org
安装的包的信息也会出现在package.json里。
默认的命令都在package.json：
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
可以用npm调用这些scripts，比如：
npm run serve
也可以
npx vue-cli-service serve
常用命令：
运行nodejs后台调试：npm run serve
打包整个前端项目（部署到python后端工程对应位置）：npm run build
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
一般建议使用独立的vue.config.js。
注意：如果使用cli，请使用如下配置变量，不要改变webpack 中的变量。
部署应用包时的基本 URL。
多页面结构时，不使用。
当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。
放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。然而，这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML，你可以通过将这个选项设为 false 来关闭文件名哈希。
在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象，对象的 key 是入口的名字，value 是：
一个指定了 entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的)；
或一个指定其 entry 的字符串。
module.exports = {
pages: {
index: {
// page 的入口
entry: 'src/index/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 当使用只有入口的字符串格式时，
// 模板会被推导为 `public/subpage.html`
// 并且如果找不到的话，就回退到 `public/index.html`。
// 输出文件名会被推导为 `subpage.html`。
subpage: 'src/subpage/main.js'
}
}
是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。
设置为 true 时，eslint-loader 会将 lint 错误输出为编译警告。默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败。
是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template选项了，但是这会让你的应用额外增加 10kb 左右。
默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。
如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。
需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。
在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity(SRI)。如果你构建后的文件是部署在 CDN 上的，启用该选项可以提供额外的安全性。
需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。
另外，当启用 SRI 时，preload resource hints 会被禁用，因为 Chrome 的一个 bug 会导致文件被下载两次。
如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
如果这个值是一个函数，则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
所有 webpack-dev-server 的选项都支持。注意：
有些值像 host、port 和 https 可能会被命令行参数覆写。
有些值像 publicPath 和 historyApiFallback 不应该被修改，因为它们需要和开发服务器的 publicPath 同步以保障正常的工作。
如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
这是一个不进行任何 schema 验证的对象，因此它可以用来传递任何第三方插件选项。
至此，vue的项目已经搭建起来了。
vue开发本文就不展开讲了。
提一些重点：
重点概念：
vue（api）参考：https://cn.vuejs.org/v2/api/
单文件组件：https://cn.vuejs.org/v2/guide/single-file-components.html
常用命令：v-bind、v-on、v-model等。
Vuex
Vue Router