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

布满荆棘的人生 2022-04-21 23:06 329阅读 0赞

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的路径改为相对路径

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NvY29fOTk4_size_16_color_FFFFFF_t_70][]

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中

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NvY29fOTk4_size_16_color_FFFFFF_t_70]: /images/20220422/3166d97af37b4eadaa9634498c276e47.png