Redbattle
踩坑
环境
项目
配置
知识点
踩坑
环境
项目
配置
知识点
  • 项目礼仪(Worktile版本)
  • Git 常用命令
  • 单元测试
  • Github Pages 前端自动化部署
  • 前端开发规范
  • 创建VUE项目
    • project
    2024-03-29

    创建VUE项目

    # 安装 vue

    • 安装 vue 脚手架

      npm install -g @vue/cli
      
    • 创建 vue 项目

      vue create hello-world
      

    # 安装 vant ui

    • 安装 vant 依赖

      npm i vant@latest-v2 -S
      
    • 自动按需引入组件 (推荐)

      # 安装插件
      npm i babel-plugin-import -D
      
    • 在.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']
        ]
      };
      
      

    # 安装 element ui

    • 安装 element 依赖

      npm i element-ui -S
      
    • 自动按需引入组件 (推荐)

      # 安装插件
      npm i babel-plugin-import -D
      
    • 在.babelrc 中添加配置

      // 将 .babelrc 修改为:
      {
        "plugins": [
          [
            "component",
            {
              "libraryName": "element-ui",
              "styleLibraryName": "theme-chalk"
            }
          ]
        ]
      }
      
      // 对于使用 babel7 的用户,可以在 babel.config.js 中配置
      module.exports = {
        plugins: [
          ['component', {
            libraryName: 'element-ui',
            libraryDirectory: 'theme-chalk'
          }, 'element-ui']
        ]
      };
      
      
    最近更新
    01
    烧虾球
    05-13
    02
    二次开发
    12-20
    03
    文字展开收起
    10-17
    更多文章>
    Theme by Vdoing
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式