后端小白的VUE入门笔记, 进阶篇（一）

基于vue-cli 创建一个模板项目
通过 npm root -g 可以查看vue全局安装目录,进而知道自己有没有安装vue-cli
如果没有安装的话,使用如下命令全局安装
cnpm install -g vue-cli
创建一个基于webpack的新项目,在这过程中, 会安装依赖
vue init webpack 项目名
启动
cd vue-router-demo
npm start

|-- build : webpack 相关的配置文件夹(基本不需要修改)
|-- config: webpack 相关的配置文件夹(基本不需要修改)
|-- index.js: 指定的后台服务的端口号和静态资源文件夹
|-- node_modules: 在上面安装的依赖,都存放在这个文件夹下
|-- src : 源码文件夹,我们后续开发的组件和js分门别类的放在这里面
|-- main.js: 应用入口 js
|-- static: 静态资源文件夹
|-- .babelrc: babel 的配置文件
|-- .editorconfig: 通过编辑器的编码/格式进行一定的配置
|-- .eslintignore: eslint 检查忽略的配置
|-- .eslintrc.js: eslint 检查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主页面文件
|-- package.json: 他就相当于maven的pom.xml, 里面存放着相关的依赖信息和项目的版本信息
|-- README.md: 应用描述说明的 readme 文件

const path = require('path')
module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {}, //添加跨域的配置
    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 9528, // 配置是否打开浏览器
    autoOpenBrowser: true,  //配置是否打开浏览器
    errorOverlay: true,
    notifyOnErrors: false,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    // Use Eslint Loader?
    // If true, your code will be linted during bundling and
    // linting errors and warnings will be shown in the console.
    useEslint: false,
    // If true, eslint errors and warnings will also be shown in the error overlay
    // in the browser.
    showEslintErrorsInOverlay: false,

import App from './App'
import router from './router'
import store from './store'
Vue.use(ElementUI, { locale })
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

<template>
  <div>
   <!-- 这里存放 -->
  </div>
</template>
<//script>
export default {
  name: 'app'
}
<///script>
<style>
</style>

<template>
<div>
    <!--第三步使用标签-->
    <hello/>  
<div/>
<template/>
<script>
import hello form './XXX/hello.vue'
export default{
    // 将组件映射成标签
    components:{
        hello
    }
}
<style>
</style>

import hello form '@/XXX/hello'

npm run build

npm install -g serve  // 安装工具
serve dist

output:{
        ...
        pathPath:'项目名称'
    }

npm run build

*.js
*.vue
一般我们就写这两部分,这一下子全忽略了

rules:{
    ...
    // 添加
    'indent':0
}

<template>
   <ChildTarget  :name="name"/>
</template>

export default{
    props:['name','name2']
}

data(){
    return{
        name:''
    }
}

watch:{
    监视的data中的对象
    name:{
        deep:true, // 深度监视
        handler: function(value){ // value就是变化后的新的值
            // todo
        }
    }
}

JSON.parse(window.localStorage.getItem('')||'默认值');

window.localStorage.setItem('自定义的key',JSON.stringfy(value))

npm install --save pubsub-js

import PubSub from 'pubsub-js'

<button @click="search">Search</botton>
export default{
    methods:{
        search(name){
            // search是方法名
            // name 是携带的参数,没参数就不用写
            Publish.publish('search',name)
        }
    }
}

mounted: {
    PubSub.subscribe("search",(name)=>{
      // todo with name
});

npm install axios --save

import axios from 'axios'

axios.get(url)
     .then(res=>{ 
         // todo with res
     })
     .catch(error){
         // todo
     }