在Webstorm上使用Vue webpack Element创建项目

小诸葛

发布于 2020-04-14 16:04:49

2.5K0

发布于 2020-04-14 16:04:49

文章被收录于专栏：方法论方法论

1.安装node.js

1.1 到node官网下载node，如图选择适合自己的安装包。

1.2 下载完成后安装，一直下一步就可以了。

1.3 安装完成后，使用win + R 打开cmd，使用 node -v 查看node版本，node是自带npm的，使用 npm -v 可查看npm版本，如图所示：

2.安装vue cli

2.1 win10下在搜索框输入cmd，右键以管理员运行，如图所示：

2.2 输入 npm install -g vue-cli，回车，安装vue-cli，安装完成后重新打开cmd，输入vue -V可查看vue-cli版本（vue3.0以上的安装有点不一样，vue3.0以上使用 npm install @vue/cli -g 安装）。

2.3 使用 npm uninstall vue-cli -g 可以卸载vue-cli。

3.初始化webpack项目

3.1 使用 vue init webpack test创建一个名为test的webpack项目，可根据提示输入自己的项目信息。

3.2 输入相关信息后，就会开始构建项目，项目构建完成后，可进到项目根目录下，使用 npm run dev 启动项目。

3.3 在浏览器输入 http://localhost:8082 访问项目，如图所示：

3.4 至此，一个基于webpack的vue项目搭建完成。

4.安装element-ui，启动项目

element-ui是一个好用的vue页面框架，使用它可以快速的构建好看的前端页面。

4.1 使用win + R打开cmd，cd到项目根目录下。

4.2 给当前项目安装element-ui模块，安装命令是：npm install element-ui --save，安装完成后如下图：

4.3 在main.js中引入element-ui，并使用此插件，然后就可以在页面中使用element-ui的插件了。

4.4 在components文件夹下的HelloWorld.vue中加入如下代码:

    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>

    <el-row>
      <el-button plain>朴素按钮</el-button>
      <el-button type="primary" plain>主要按钮</el-button>
      <el-button type="success" plain>成功按钮</el-button>
      <el-button type="info" plain>信息按钮</el-button>
      <el-button type="warning" plain>警告按钮</el-button>
      <el-button type="danger" plain>危险按钮</el-button>
    </el-row>

    <el-row>
      <el-button round>圆角按钮</el-button>
      <el-button type="primary" round>主要按钮</el-button>
      <el-button type="success" round>成功按钮</el-button>
      <el-button type="info" round>信息按钮</el-button>
      <el-button type="warning" round>警告按钮</el-button>
      <el-button type="danger" round>危险按钮</el-button>
    </el-row>

HelloWorld.vue完整代码:

<template>
  <div class="hello">

    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>

    <el-row>
      <el-button plain>朴素按钮</el-button>
      <el-button type="primary" plain>主要按钮</el-button>
      <el-button type="success" plain>成功按钮</el-button>
      <el-button type="info" plain>信息按钮</el-button>
      <el-button type="warning" plain>警告按钮</el-button>
      <el-button type="danger" plain>危险按钮</el-button>
    </el-row>

    <el-row>
      <el-button round>圆角按钮</el-button>
      <el-button type="primary" round>主要按钮</el-button>
      <el-button type="success" round>成功按钮</el-button>
      <el-button type="info" round>信息按钮</el-button>
      <el-button type="warning" round>警告按钮</el-button>
      <el-button type="danger" round>危险按钮</el-button>
    </el-row>

    <el-row>
      <el-button icon="el-icon-search" circle></el-button>
      <el-button type="primary" icon="el-icon-edit" circle></el-button>
      <el-button type="success" icon="el-icon-check" circle></el-button>
      <el-button type="info" icon="el-icon-message" circle></el-button>
      <el-button type="warning" icon="el-icon-star-off" circle></el-button>
      <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </el-row>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

4.5 在项目根目录下打开cmd，输入 npm run dev 启动项目

4.6 在浏览器输入http://localhost:8081访问