1. 安装Vue-Cli
     npm install -g @vue/cli --registry=https://registry.npm.taobao.org
  2. 启动 Vue UI
     vue ui
  3. 创建项目
    • 点击 “Vue 项目管理器” 界面中的 “创建” 按钮，
    • 选择合适的文件夹，用于存放创建的项目(譬如: F:\2019-01-02\iview-courses)，然后点击“+ 在此创建新项目”
    • 进入 “创建新项目” 界面，在 “详细” 选项卡下:
      • “项目文件夹” 下，输入项目名（譬如: test）
      • “包管理器”下，下拉选择 “npm”
      • “更多选项”下，启用 “若目标文件夹已存在则将其覆盖”
      • “Git” 下，禁用 “初始化 git 仓库 (建议)”
      • 点击 “下一步”，切换到 “预设” 选项卡
    • “选择一套预设” 下，选择 “默认”
    • 点击 “创建项目” 按钮，等待执行完成
    • 项目创建完成后，默认进入到 “项目仪表盘” 界面
    • 点击左边导航栏 “插件”，在打开的 “插件” 界面中，点击右上角的 “添加插件” 按钮
    • 在 “添加插件” 界面的 “查找插件” 框中，输入 “iview”
    • 在出现的列表中，找到并点击 “vue-cli-plugin-iview”，然后点击右下角的 “安装vue-cli-plugin-iview”，等待安装完成后点击 “√ 安装完成”
    • 等待页面加载完成后，点击 “√ 继续”
    • 点击左边导航栏 “任务”，接着点击 “serve”
    • 再点击 “运行” 按钮，启动项目
    • 等待项目启动完成后，点击 “启动app”，即可在浏览器新选项卡中打开应用页面
  4. 进入目录 F:\2019-01-02\iview-courses，在文件夹 “test” 上鼠标右键 “Open Folder as WebStorm Project”，在 WebStorm 中打开项目
  5. 在项目根目录新建文件 vue.config.js，内容如下:
     module.exports = {
     css: {
         loaderOptions: {
             less: {
                 javascriptEnabled: true
             }
         }
     },
     chainWebpack: config => {
         config.module
             .rule('vue')
             .test(/\.vue$/)
             .use('iview-loader')
             .loader('iview-loader')
             .options({
                 prefix: true
             })
     }
 }
    参考:
  6. 点击左边导航栏 “依赖”，在打开的 “依赖” 界面中
    • 点击右上角的 “添加依赖” 按钮
    • 切换到 “开发依赖” 选项卡
    • 在 “查找插件” 的输入框中输入 “less”
    • 从下拉列表中，选择 “less”，然后点击右下角的 “安装 less”
    • 从下拉列表中，选择 “less-loader”，然后点击右下角的 “安装 less-loader”
    • 切换到 “运行依赖” 选项卡
    • 在 “查找插件” 的输入框中输入 “iview-loader”
    • 从下拉列表中，选择 “iview-loader”，然后点击右下角的 “安装 iview-loader”
  7. 第6步 也可以在项目目录下package.json同目录，命令行中执行：
     npm install less less-loader --save-dev --registry=https://registry.npm.taobao.org
 npm install iview-loader --save --registry=https://registry.npm.taobao.org