环境
环境准备
环境依赖等
编辑器选择pycharm与webstorem比较
https://intellij-support.jetbrains.com/hc/en-us/community/posts/205807379-PyCharm-vs-WebStormThe only difference between PyCharm and Webstorm is the following plugins bundled with WebStorm:aspCucumberJavaScriptDartEJSJadeLiveEditMeteorNodeJSQuirksModeRefactorXWebComponentsYeomanjs-karmajspnode-remote-interpreterspy-jsvuejsw3validators 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
保持原样
vue_demo
Vue_Demo/src/main.js
/** * Created by infaa on 2018/9/13. */import Vue from 'vue'import App from './App'// Vue.config.productionTip = falsenew Vue({ el: '#app', components: { App }, template: ' Vue_Demo/src/App.vue 主入口
in app
Vue_Demo/src/components/Hello.vue
{ {msg}}
其中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: '