vue脚手架搭建和iview踩坑 "vue": "^2.5.2"

*****先要安装node.js，使用npm包管理工具 node.js安装方法如下*****

https://blog.csdn.net/shiyaru1314/article/details/54963027

https://blog.csdn.net/qq_42564846/article/details/82688266

 

大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。

淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

 

安装vue-cli             版本  "vue": "^2.5.2"

npm install vue-cli -g

 

 

1. cd 工程所在路径

2. vue init webpack fuxi (fuxi是项目名字) 命令: 初始化项目环境

(1)作者.版本. eslint(语法检查) test2 unit (测试环境)

注意: 初始化一个vue脚手架项目 需要(nodeJS环境nodexxx.exe, webpack环境, vue-cli功能性插件(全局))

 

命令输入后会有如下问题：

 

Generate project in current directory? (Y/n)

→ 在当前目录中生成项目？

Project name (vueTset2)

→ 项目名字

Project description (A Vue.js project)

→ 项目描述

Author

→ 作者

Vue build  

→ 打包方式     选择第一个

Install vue-router? (Y/n)

→ 是否要安装 vue-router，项目中肯定要使用到 所以Y回车

Use ESLint to lint your code? (Y/n)

→ 使用ESLint来编写代码?     选择第一个

Pick an ESLint preset (Use arrow keys)

→ 选择ESLint预设(使用箭头键)

Set up unit tests (Y/n)    选择 n

→ 设置单元测试

Setup e2e tests with Nightwatch? (Y/n)   选择 n

→ 是否需要 端到端测试工具 目前我们不需要 所以 n 回车

Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)

→ 我们是否应该在项目创建后为您运行' npm install ' ?(推荐)(使用方向键)   

 

 

3. (工程里应该有一个node_modules的文件夹, 里面装的都是第三方插件) 如果没有这个文件夹, 需要运行命令 cnpm install

安装jquery cnpm install jquery

 

4. npm (专门用于管理 第三方插件)

npm install 第三方js (下载)

npm uninstall 第三方js(卸载/删除)

 

5. npm install webpack -g (-g全局安装)

(nodejs 安装在哪个盘符下, 全局安装的node_modules就在哪个盘符下)

 

6. npm install webpack —save-dev (把你要安装的依赖第三方插件名字 自动配置到 package.json里生产环境列表里

 

8. npm install webpack 什么参数都不加, 默认配置到 package.json的发布环境列表里

 

9. npm install 不加-g 默认安装到的是 命令行所在的文件夹的位置

 

Vuex 是什么？（可以设置全局变量）

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

 

VUE -- 全局变量的几种实现方式

https://www.cnblogs.com/mafeng/p/7723179.html

 

1.iView框架的table表格取user对象下面的moble字段的解决办法

 

{
          title: "用户手机号",
          align: "center",
          render:(h,parmas)=>{
            let text = parmas.row.user.mobile
            console.log(text)
            return h('span',text)
          }
}

根据type的数字显示对应文字 type : 类型1：系统红包 2：转发红包

 

{
          title: "类型",
           minWidth: 100,
          key: "type",
          render: (h,parmas) => {
            console.log( parmas.row)
            let text = null
            parmas.row.type == 1 ? text = "系统红包" : text = "转发红包"
            return h('span',text)
          }
},

2.vue报错

vue.esm.js?efeb:591 [Vue warn]: Invalid prop: type check failed for prop "value". Expected Number, got String.

 

<InputNumber
    v-model="formItem.winningNum"
    :min="0"
    placeholder="请输入"
    style="width:186px"
    ></InputNumber>

解决：v-model="formItem.winningNum" 的formItem.winningNum设为number型

 

3.iview模态框里的表单验证

 

 <!-- 新活动模态框 -->
        <Modal
          v-model="addModal"
          title="新活动"
          :loading="loading"
         
          width="500"
        >
          <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
            <FormItem label="活动名称" prop="name">
              <Input v-model="formValidate.name" clearable placeholder="请输入活动名称" style="width:200px"></Input>
            </FormItem>
            <FormItem label="领取金额（￥）" prop="getMoney">
              <InputNumber v-model="formValidate.getMoney"  placeholder="请输入领取金额（￥）" style="width:200px" ></InputNumber>
            </FormItem>
            <FormItem label="帮拆金额（￥）" prop="openMoney">
              <InputNumber  v-model="formValidate.openMoney" placeholder="请输入帮拆金额（￥）" style="width:200px"></InputNumber>
            </FormItem>
             <FormItem label="帮拆人数（人）" prop="helpPersonNum">
              <InputNumber v-model="formValidate.helpPersonNum" placeholder="请输入帮拆人数（人）" style="width:200px"></InputNumber>
            </FormItem>
          </Form>
          <!-- 自定义模态框页脚 -->
          <div slot="footer">
              <Button  @click="addCancel('formValidate')">取消</Button>
              <Button type="primary" @click="addOk('formValidate')">确定</Button>
          </div>
        </Modal>


 // 新活动模态框 表单
      formValidate: {
        name: null,
        getMoney: null,
        openMoney: null,
         helpPersonNum: null
      },
      // 新活动模态框 表单验证
      ruleValidate: {
        name: [
          {
            required: true,
            message: "活动名称不能为空",
            trigger: "change"
          }
          
        ],
         getMoney: [
          {
            required: true,
            type: 'number',
            message: "领取金额（￥）不能为空",
            trigger: "change"
          }
          
        ],
         openMoney: [
          {
            required: true,
            type: 'number',
            message: "帮拆金额（￥）不能为空",            
            trigger: "change"
          }
        ],
         helpPersonNum: [
          {
            required: true,
            type: 'number',
            message: "帮拆人数（人）不能为空",
            trigger: "change"
          }
        ]
      },

 

4.iview表格列操作 里面 写几个button按钮 写法

 

{
          title: "操作",
          key: "action",
          align: "center",
          minWidth: 200,
          fixed: "right",
          render: (h, parmas) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.addModal = tru