初学vue+elementui搭建前台项目教程

vue+elementui搭建前台项目教程

准备工作

1、下载node 配置node环境(注意：不管是跑别人的项目还是用自己的项目，都需要下载node)

https://nodejs.org/en/

2、一路next或者放入自己喜欢的文件夹中（此操作省略）

3、测试node是否安装成功

命令：1、node -v （查看node的版本号）

​ 2、npm -v （查看npm版本号）

4、环境配置

这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。 例如：我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在我安装的文件夹【D:\software\node】下创建两个文件夹【node_global】及【node_cache】如下图：

创建完两个空文件夹之后，打开cmd命令窗口，输入

npm config set prefix "D:\software\node\node_global"
npm config set cache "D:\software\node\node_cache"

配置环境变量

1、在系统变量添加NODE_PATH配置环境变量

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BytTrj22-1594713219434)(C:\Users\Administrator\Desktop\1594711655589.png)]2、在用户变量的path中的npm修改node_global

测试

配置完后，安装个module测试下，我们就安装最常用的express模块，打开cmd窗口，
输入如下命令进行模块的全局安装：

npm install express -g     # -g是全局安装的意思

搭建vue脚手架

1、npm install --global vue-cli （全局安装vue-cli）

2、建一个空白文件夹

3、通过cmd命令进入文件夹

4、执行vue init webpack 名称（建立项目的名称）

​ …静静地等待，回车，输入y确认即可

当出现下图便可以执行vue测试有没有搭建成功

依次执行上面的命令，启动，当出现localhost:8080端口既可搭建成功

使用idea启动项目

准备工作

1、安装vue插件（方便后续开发使用）

2、打开项目在Terminal输入命令启动项目

直接输入npm run dev

3、安装element ui（可以直接在Terminal输入）

npm i element-ui -S

4、修改配置，

4.1在main.js中修改

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

4.2 在router文件夹下面的index.js修改跳转路径

​

import Login from '@/login/Login' #这个是跳转的文件名称以及路径
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login', //跳转名称
      component: Login //和上面的login对应进行跳转
    }
  ]
})

ps：由于博主今天刚研究vue router还有点不足，希望小伙伴们能够提供宝贵的意见，后续会继续更新

4.3 编写登录文件

ps：代码从网上拷贝的，为了能够快速的验证功能

<template>
  <div>
    <!--flex弹性盒子模型，justify-content：主抽 -->
    <div style="display: flex;justify-content: center;margin-top: 150px">
      <el-card style="width: 400px">
        <div slot="header" class="clearfix">
          <span>登录</span>
        </div>
        <table>
          <tr>
            <td>用户名</td>
            <td>
              <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
            </td>
          </tr>
          <tr>
            <td>密码</td>
            <td>
              <el-input type="password" v-model="user.password" placeholder="请输入密码" @keydown.enter.native="doLogin"></el-input>
              <!-- @keydown.enter.native="doLogin"当按下enter键的时候也会执行doLogin方法-->
            </td>
          </tr>
          <tr>
            <!-- 占两行-->
            <td colspan="2">
              <!-- 点击事件的两种不同的写法v-on:click和 @click-->
              <!--<el-button style="width: 300px" type="primary" v-on:click="doLogin">登录</el-button>-->
              <el-button style="width: 300px" type="primary" @click="doLogin">登录</el-button>
            </td>
          </tr>
        </table>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  /* name: 'Login', */
  data () {
    return {
      user: {
        username: '测试',
        password: '123456789'
      }
    }
  },
  methods: {
    doLogin () {
      alert(JSON.stringify(this.user))
    }
  }
}
</script>

<style scoped>

</style>

  password: '123456789'
  }
}

},
methods: {
doLogin () {
alert(JSON.stringify(this.user))
}
}
}