Vue cli4构建一个简单的CRM项目(一)

灰太狼 2023-07-13 04:14 9阅读 0赞

终于介绍完了VUE的基础知识，从今天开始准备做个移动端的功能简单的客户关系管理系统来继续学习。  
系统复杂一点的功能在pc端，移动端实现的是对潜在客户的管理，只要实现员工登录，录入客户信息，客户跟踪，经理登录后能够查看员工的工作情况，如统计员工新增的客户和客户维护情况。

# 初始化项目 #

用图形化界面新建一个项目crm

vue ui

在预设中选择手动配置项目，在功能界面中做如下Babel、Router、Vuex、Css Pre processors Linter/Formatter  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]

在配置中界面中选择Less,Linter/Formatter选ESLint+standard config,再选Lint on save,点击创建项目并保存为预设方案方便下次使用，然后等待即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70_pic_center]

# Vue cli4构建的Vue项目结构 #

使用上面的配置自动生成的Vue项目结构见下图（我的vue/cli版本是4.5.4）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 1]  
有了前面的webpack的基础知识，相信这个结构不会太陌生，但是有个问题出现了，webpack配置文件在哪里呢？其实webpack配置文件是被Vue隐藏起来了，vue cli3开始使用vue.config.js作为配置文件，Vue中对webpack配置做了定制，增加了一些定制属性。它最终会被合并到webpack配置中，vue.config.js是可选的，要放置到项目根目录（与package.json）  
执行下面的命令，可以在生成的webpack.js文件中查看项目的webpack配置

vue inspect > webpack.js

如果想修改vue cli对项目的默认配置，可以在可视化窗口修改配置，可视化窗口提供了很多功能，能够帮助我们优化webpack的配置。

查看一下package.json文件，发现vue cli已经帮我们做了很多，scripts中已经有了3个命令，那就走起吧

npm run serve

编译成功后，命令行窗口会把网址打印出来。  
添加配置文件`vue.config.js`，写入一些配置项,这里为了开发方便加入了几个别名，并设置了开发服务器的端口号

const path = require('path')
    
    function resolve (dir) { 
      return path.join(__dirname, dir)
    }
    
    module.exports = { 
      chainWebpack: (config) => { 
        config.resolve.alias
          .set('@', resolve('./src'))
          .set('components', resolve('./src/components'))
          .set('views', resolve('src/views'))
          .set('assets', resolve('src/assets'))
      },
      devServer: { 
        port: 3000 // 端口
      }
    }

[vue.config.js常用配置项][vue.config.js]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200310172944379.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/2020082412442558.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200312103916747.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw==,size_16,color_FFFFFF,t_70
[vue.config.js]: https://blog.csdn.net/dreamingbaobei3/article/details/108315902