vue项目环境搭建

vue项目环境搭建

• cli3 / cli2

创建项目

vue create  项目名

• 项目目录构建（ src 源代码开发目录中的 ）

  • pages 页面
  • components 组件
    • common 公共组件
    • layout 项目布局外壳
  • store vuex
  • router 路由
  • lib 第三方插件
  • utils 自行封装的库
    

• vue UI组件库引入

  • 关于vue的ui组件库很多 / 也可以使用 ui库 类似 SUI

  • pc： iview 、 elementUI

  • 移动端：MintUI

  • 使用

    • 全局引用： 将ui组件库中的全部组件引入项目，这种做法会增大项目体积

    • 按需引入： 将你需要的组件引入进来

    • 第一步： 先安装：

      $ yarn add iview

      $ yarn add babel-plugin-import -D

    • 第二步： 在cli3中bable优雅降级配置中引入以下配置

      module.exports = {
               
        presets: [
          '@vue/app'
        ],
        "plugins": [["import", {
               
          "libraryName": "iview",
          "libraryDirectory": "src/components"
        }