vue part2 webpack

环境环境准备环境依赖等https://www.cnblogs.com/infaaf/p/9631848.html编辑器选择pycharm与webstorem比较https://intellij-support.jetbrains.com/hc/en-us/community/posts/205807379-PyCharm-vs-WebStormThe only di...

weixin_33719619

157人浏览 · 2018-09-12 20:25:00

weixin_33719619 · 2018-09-12 20:25:00 发布

环境

环境准备

环境依赖等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...

View Code

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>

View Code

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/>'

})

View Code

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>

View Code

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>

View Code

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