使用vue+elementUI+webpack+vueRouter搭建项目

1. vue开发环境搭建
    1) node
    2) npm / cnpm （npm install -g cnpm --registry=https://registry.npm.taobao.org）
    3) vue-cli@2.9.6

       > npm install vue-cli@2.9.6 --global
        > vue --version
2. vue工程
    1) vue init webpack app01   通过vue的脚手架创建vue工程
    2) cd app01
    3) npm install /cnpm install

         ①创建项目可以直接选择vue-router进行安装

        手动安装配置
          > npm install vue-router --save
        1）src/router/index.js    2. src/main.js

         ②也可以在npm install时自动安装

       同时可安装vue的产品依赖qs、element-ui、axios

         npm install axios  --save
         npm install element-ui  --save
         npm install qs  --save

 

    4) npm run start/dev

           1.代码转换以及打包
            2.启动静态服务器 webpack-server
            3.部署，将打包后的代码部署到webpack-server上

    5) http://localhost:8080

    项目完成后打包部署到阿里云

    npm runbuild

    产生一个dist目录，此时产生的dist不能查看，需要将config/index.js中build的路径改为相对路径

   

 

 

3. vue项目结构
    app01
        build                     webpack的配置文件目录
        config                     当前项目的配置信息
        dist                         打包后文件存储目录（交付）
            index.html
            static
                (js css img font)
        node_modules         第三方模块
        src                         源码目录
            components
            ...
            main.js
            App.vue
        index.html             首页  第三方依赖  jquery/bootstrap/axios快速加载映入
        package.json         node项目的核心配置  --save  -save-dev
        .babelrc                 babel配置文件
        .gitignore             git忽略文件    
                                            node_modules
                                            src
     git  仓库
        初始华本意  创建本地仓库
           github    git的远程仓库 相当于一个社区 ，开源项目的开发                                    ..
4. Vue实例
    mvvm
    model         vm                view

    .vue vue模块文件
    1) 模板
        <template></template>
    2) js
      es6
        export default {
            data(){
                return {

                }
            },
        }
    3) css
    new Vue({
        el:'#app',
        data:{
            msg:''
        },
        methods:{
            foo(){
                this 指向当前Vue实例
            }
        },
        components:{

        },
        beforeMount(){

        },
        mounted(){
            this指向当前Vue实例
        }
    })

    结论：
        1. vue实例对象如何访问
            1) let vm = new Vue({})
            2) 可以在methods，生命周期钩子函数中定义的方法内通过this来访问
        2. vue实例可以直接访问data，methods中定义的属性和方法
            this.a             a定义在data中
            this.foo()     foo定义在methods中