vue 项目

源码地址：gitee.com/fly-sy/ms-v…

vue-cli 基本使用

1. 安装全局的工具包

npm i @vue/cli -g

2. 测试版本

vue -V || vue --version

3. 创建项目

   • 黑窗口方式

     vue create my-project

   • 界面可视化方式

     vue ui

   • 拉取旧版

     npm install -g @vue/cli-init

     vue init webpack my-project

第三方 ui 组件库的使用

vant

完整引入

1. 安装依赖包

   # Vue 3 项目，安装最新版 Vant：
   npm i vant -S
   
   # Vue 2 项目，安装 Vant 2：
   npm i vant@latest-v2 -S
   
   

2. 在 main.js 文件中导入所有组件

   Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。

   import Vue from 'vue';
   import Vant from 'vant';
   import 'vant/lib/index.css';
   
   Vue.use(Vant);
   

3. 在任意的组件中使用组件

   <van-button type="primary">主要按钮</van-button>
   <van-button type="info">信息按钮</van-button>
   <van-button type="default">默认按钮</van-button>
   <van-button type="warning">警告按钮</van-button>
   <van-button type="danger">危险按钮</van-button>
   

按需引入

1. 安装依赖包

   # Vue 3 项目，安装最新版 Vant：
   npm i vant -S
   
   # Vue 2 项目，安装 Vant 2：
   npm i vant@latest-v2 -S
   
   

2. 安装插件

     npm i babel-plugin-import -D
   
   

3. 配置.babelrc 或者是 babel.config.js

     // 在.babelrc 中添加配置
     // 注意：webpack 1 无需设置 libraryDirectory
     {
       "plugins": [
         ["import", {
           "libraryName": "vant",
           "libraryDirectory": "es",
           "style": true
         }]
       ]
     }
   
     // 对于使用 babel7 的用户，可以在 babel.config.js 中配置
     module.exports = {
       plugins: [
         ['import', {
           libraryName: 'vant',
           libraryDirectory: 'es',
           style: true
         }, 'vant']
       ]
     };
   
   

4. 在 main.js 文件中注册组件

   import { Button } from 'vant';
   

5. 可以在任意的组件中使用 ui

   <van-button type="primary">主要按钮</van-button>
   <van-button type="info">信息按钮</van-button>
   <van-button type="default">默认按钮</van-button>
   <van-button type="warning">警告按钮</van-button>
   <van-button type="danger">危险按钮</van-button>
   

傻瓜式

vue add vant

项目的结构

• node_modules 依赖包

• public 静态资源托管

• src 源码

  • assets

    • js

    • images

    • font

    • css

  • components 存放自定义组件

  • plugins 存放 ui

  • router 存放路由

  • views | pages 存放路由组件

  • App.vue 入口组件

  • main.js 入口文件

  • utils 工具类

  • store 状态管理

  • mixins 抽离公共的功能 混入

  • filters 过滤器

  • directives 自定义指令

• eslintrc.js 配置 eslint 的规则

• prettierrc.json 设置格式化的规范

• babel.config.js 配置插件

• vue.config.js 配置 webpack 相关