环境
环境准备
环境依赖等https://www.cnblogs.com/infaaf/p/9631848.html
编辑器选择pycharm与webstorem比较
https://intellij-support.jetbrains.com/hc/en-us/community/posts/205807379-PyCharm-vs-WebStorm The only difference between PyCharm and Webstorm is the following plugins bundled with WebStorm: asp CucumberJavaScript Dart EJS Jade LiveEdit Meteor NodeJS QuirksMode RefactorX WebComponents Yeoman js-karma jsp node-remote-interpreter spy-js vuejs w3validators All of them you can install in Pycharm| Settings (Preferences for OS X)| Plugins| Install JetBrains Plugin...
webpack 环境
知识补充components
注意kv相同时的简写理解。扩展为标签。
http://www.cnblogs.com/moqiutao/p/8328931.html
https://www.jianshu.com/p/468956854be2
template 静态模版
自定义控件 <app/> <HelloWorld/>
熟悉结构
- 目录结构与用途略
- 主要文件index.html --> main.js ==> app.vue ==> HelloWorld.vue 关系
简析：
main.js
import from ，其中from后的内容进行了简写，import可以组件文件整体导入，node_module目录下的甚至省略了路径与后缀名
components: { App } 组件，简写形式还原｛App:'App'｝。 多层调用到HelloWorld。注意不光包含js代码，实际包含整个文件（html 以template形式，css，js）。
template: '<App/>' 上面是申明组件（标签），这里使用。
组件定义使用流程 （1） import HelloWorld 整个文件（组件），（2） 注册component名称为HelloWorld ，（3）template里使用<HelloWorld>标签。
主架构演练
删除内置demo重写演练
Vue_Demo/index.html
保持原样
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue_demo</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Vue_Demo/src/main.js
/** * Created by infaa on 2018/9/13. */ import Vue from 'vue' import App from './App' // Vue.config.productionTip = false new Vue({ el: '#app', components: { App }, template: '<App/>' })
Vue_Demo/src/App.vue 主入口
<template> <div class="inApp"> <p>in app</p> <Hello/> </div> </template> <script> import Hello from './components/Hello.vue' export default { components: { Hello } } </script> <style> .inApp p{ color: aqua; } </style>
Vue_Demo/src/components/Hello.vue
<template> <div class="inApp"> <span>{{msg}}</span> </div> </template> <script> export default { data () { return { msg: 'hello msg' } } } </script> <style> .inApp{ color: red; } </style>
其中App.vue 与Hello.vue 的style使用相同的css定位#app， 渲染后能区分出。
运行
npm run dev
如有报错修复或者配置项关闭eslint
打包与发布
npm run dev 启动的是dev环境，目录为src目录，非正式上线目录。
打包
npm run build
发布1 （开发环境调试）
准备 npm install -g serve # 注意是serve
serve dist # 同上是serve。 dist指打包生成的dist目录。
运行成功后可访问http://localhost:5000/ ## 修改代码需要重新打包才能更新。
发布2 正式
#todo
其他
eslint检查关闭
一般建议不要关闭
根据提示eslint/xxxname 提示名 ，修改Vue_Demo/eslintrc.js文件 rules: {｝字典中对应的值
或者直接修改eslintignor文件
main.js组件注册简写形式
import App from './App' new Vue({ el: '#root', render: h => h(App) }) // 写法2： import App from './App' new Vue({ el: '#root', template: '<App></App>', components: { App } })