ivew 简单的部署

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
               })
       }
   }
   

   参考:
   • WARN conflicting versions for project dependency “less”
   • vue-cli3中chainWebpack怎么配置？？
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