vue+element-ui搭建迷你电商平台系列篇（三）

这是我参与11月更文挑战的第15天，活动详情查看：2021最后一次更文挑战

接上一篇juejin.cn/post/703081…

三、目录结构介绍

不同创建方式的初始目录略有不同，这里只介绍vue init webpack的创建方式和我选择安装的插件所生成的项目结构

.
├── ./README.md 
├── ./build
│   ├── ./build/build.js
│   ├── ./build/check-versions.js
│   ├── ./build/logo.png
│   ├── ./build/utils.js
│   ├── ./build/vue-loader.conf.js
│   ├── ./build/webpack.base.conf.js  //webpak基础配置文件
│   ├── ./build/webpack.dev.conf.js //webpak开发环境配置文件
│   └── ./build/webpack.prod.conf.js //webpak生产环境配置文件
├── ./config
│   ├── ./config/dev.env.js //本地测试服务器的配置文件
│   ├── ./config/index.js
│   └── ./config/prod.env.js
├── ./index.html
├── ./package-lock.json
├── ./package.json
├── .eslintignore //忽略检查代码规范的文件配置
├── .eslintrc.js //eslint的配置文件
├── .gitignore //忽略git管理的文件配置
├── ./src
│   ├── ./src/App.vue //整个项目的根组件，用来展示其他的组件
│   ├── ./src/assets //静态文件文件夹
│   │   └── ./src/assets/logo.png
│   ├── ./src/components //放组件的文件夹
│   │   └── ./src/components/HelloWorld.vue //示例组件，直接删掉，删除后修改把对应路由也删除
│   ├── ./src/main.js //入口文件，用来导全局的包
│   └── ./src/router // 路由文件夹
│       └── ./src/router/index.js //路由配置文件
└── ./static

7 directories, 21 files

四、开发

• element-ui安装导入

  0. npm i element-ui -S // 插件安装

  1. 在main.js文件中导入并使用element-ui和其样式文件

     import Vue from 'vue'
     import App from './App'
     import router from './router'
     import ElementUI from 'element-ui'
     import 'element-ui/lib/theme-chalk/index.css'
     ​
     Vue.config.productionTip = false
     Vue.use(ElementUI)
     ​
     /* eslint-disable no-new */
     new Vue({
       el: '#app',
       router,
       components: {App},
       template: '<App/>'
     })
     

• 登录组件开发

0. 首先在./src/components文件夹下新建login文件夹，然后在login文件夹下新建login.vue组件

   <template>
   <div>这是登录组件</div>
   </template>
   ​
   <script>
   export default {
     name: "login"
   }
   </script>
   ​
   <style scoped>
   ​
   </style>
   

1. 配置路由

   • 进入路由的配置文件./src/router/index.js配置login组件的路由

   • import Vue from 'vue'
     import Router from 'vue-router'
     import Login from '@/components/login/login.vue' //webpack模版中`@`符号会自动寻找到src文件夹
     ​
     Vue.use(Router)
     ​
     export default new Router({
       routes: [
         {
           path: '/login',
           name:'Login',
           component: Login
         }
       ]
     })
     //HolleWord示例的组件和路由直接删除
     

   • npm run dev启动项目，访问 http://localhost:8080/#/login 查看路由是否设置成功；

   下集继续讲引入表单组件。