vue2+webpack学习

vue2+webpack学习篇之创建项目

1、脚手架搭建项目

1. 使用vue-cli脚手架搭建项目(需联网下载模板)
   vue init webpack myproject
   创建项目信息描述

   ? Project name (myproject)  //项目名称，直接回车
   ? Project description (A Vue.js project)  //描述信息 回车
   ? Author (mayujuan <2205568144@qq.com>)  //作者 回车
   ? Vue build (Use arrow keys)  //默认选第一个  回车
   ? Install vue-router? (Y/n)  //是否安装vue-router  回车
   ? Use ESLint to lint your code? (Y/n) // 使用ESLint校验代码  n+回车
   ? Set up unit tests (Y/n)  //使用 unit tests  n+回车
   ? Setup e2e tests with Nightwatch?  //n+回车
   ? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys) // 选择是否使用npm下载依赖  启动verdaccio 回车
   

   运行图片()

2. 运行项目

   cd myproject
   npm run dev
   

3. 下载项目所需依赖

     npm install -S babel-polyfill //兼容ie
     npm install -S element-ui  // 下载element库  官方文档(https://element.eleme.cn/#/zh-CN/component/installation)
     npm install -S axios  // 下载axios
     npm install -S vuex
     // scss环境
     npm install node-sass
     // node-sass下载报错时修改下载源
     npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
     npm install sass-loader@7.3.1 --save-dev
     npm install sass-resources-loader --save-dev
   
   

4. 项目结构
   myproject // 项目名称
      build // webpack打包时配置文件
      config // 配置文件
      node_modules // 项目依赖
      src // 项目主要代码
          api // 接口地址文件
          index.js // api入口文件
      assets // 图片 css资源目录
          css
          img
      components // 组件目录
          global // 全局组件
      pages // 具体项目文件
      public // 公用文件
          global.js // 全局变量及方法定义
          install.js // 注册全局方法
      request // 请求服务配置目录
          index.js // http请求封装
      router // 路由目录
      App.vue // 页面
      main.js // 入口文件
      static // 项目中的静态文件 打包时不会被编译

5. main.js 引入共用文件

    // The Vue build version to load with the `import` command
     // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
     import 'babel-polyfill' // 兼容ie
     import Vue from 'vue'
     import App from './App'
     import router from './router'
     import axios from 'axios';
     import qs from 'qs'
     import Vuex from 'Vuex'
     import ElementUI from 'element-ui'  // element库
     import template from './components/global/install.js'  //全局组件
     import 'element-ui/lib/theme-chalk/index.css'
     import './assets/css/index.css'  //全局样式文件
   
     Vue.use(Vuex)
     Vue.use(ElementUI)
     Vue.use(template)
   
     Vue.config.productionTip = false
     Vue.prototype.axios = axios;
     Vue.prototype.qs = qs;
   	
     /* eslint-disable no-new */
     const vue = new Vue({
       el: '#app',
       router,
       components: { App },
       template: '<App/>'
     })
     export default vue
   
   

6. App.vue
   可不做修改，也可以做一些全局监听

7. pages目录
   在src下新建pages文件 用来放页面文件 一般按照模块分类建文件夹
   新建 home/list.vue home/add.vue
   新建index.vue文件作为项目的框架文件（包含页面公用头部、管理系统的菜单栏、路由切换时显示位置）

8. router目录 路由文件
   index.js 配置页面路由文件

   import index from '@/pages/index'  //引入文件
   import homeList from '@/pages/home/list.vue'  //引入文件
   import homeAdd from '@/pages/home/add.vue'  //引入文件
   export default new Router({
     routes: [
       {
         path: '/',  //默认展示页面
         name: 'index',
         component: index,
         children: [ //用来切换的页面路由
           {
             path: '/',  //二级路由默认展示页面
             name: 'homeList',
             component: homeList,
           },
           {
             path: '/homeList',  // 路由访问路径
             name: 'homeList',  // 路由名称
             component: homeList,  // 路由组件
           },
           {
             path: '/homeAdd',  //路由访问路径
                 name: 'homeAdd',
                 component: homeAdd,
               }
             ]
           }
         ]
       })
   

9. components目录
   用来放定义的公用组件
   新建index.js文件 //注册全局组件
   global //全局组件目录
   install.js // 注册全局组件
   dialog.vue // 全局组件内容
   install.js //

   // 一次引入终身受用
   /**
    * require.context()参数的意义
    * arg1.在哪里找
    * arg2.是否要找子集
    * arg3.以什么为规则来找
    */
   const requireComponent = require.context('./', true, /\.vue$/)
   const install = (Vue) => {
     // 如果组件被注册就返回,没有就注册
     if (install.installed) return
     install.installed = true
     requireComponent.keys().forEach(filename => {
       // filename 文件
       // 第i个组件
       const config = requireComponent(filename)
       // 组件名
       const componentName = config.default.name
       // 循环注册组件
       Vue.component(componentName, config.default || config)
     })
   }
   
   export default {
     install
   }
   
   

   dialog.vue文件

   <div class="comdialog">
     <el-dialog>
       <div>
         <!-- 父组件中自定义标签 -->
         <slot></slot>
       </div>
     </el-dialog>
   </div>
   <script>
     export default {
       name: 'comDialog',  //name为组件名称
       props: {
         dialogList: Object
       },
       data() {
         return {
           dataList: this.dialogList
         }
       },
     }
   </script>