开发环境需要先安装node.js

如何安装请自行百度

第一步、安装webpack


npm install -g webpack

第二步、安装vue-cli


vue-cli脚手架用来生成.vue模板文件的

 1、安装vue-cli脚手架

npm install -g vue-cli
2、使用vue-cli安装项目


vue init webpack vue  //vue是项目名称

此时会弹出项目配置项


? Target directory exists. Continue?  //目录存在是否继续,我这里安装过一次回车继续
? Project name (vue)   //项目名称 回车继续
? Project description  //项目属性 回车继续
? Author  //作者   回车继续
> Runtime + Compiler: recommended for most users
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - re
nder functions are required elsewhere //回车继续
? Install vue-router? (Y/n)   //vue路由  选择Y
? Use ESLint to lint your code? (Y/n) //eslint 代码检测  我这里选择N 不做代码检测
? Set up unit tests (Y/n)  //是否创建tests目录  我这里选择N
? Setup e2e tests with Nightwatch? (Y/n) //继续N
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself //这里选择y 继续安装

稍等 项目正在安装

安装完成后

cd vue //切换项目目录

npm run dev //运行项目这时可以在浏览器打开命令窗口所提示的网址一般为http://localhost:8080

这时我们可以看到vue安装成功的界面


此时我们需要安装npm的依赖


cd vue //进入我们的项目路径
npm install //安装依赖
 npm run dev //运行项目

如果在此期间安装报错


npm WARN ajv-keywords@3.4.1 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

audited 11813 packages in 5.707s
found 10 vulnerabilities (6 moderate, 4 high)
  run `npm audit fix` to fix them, or `npm audit` for details
请参考:https://www.jikeyuan.cn/a/156.html 文章的解决办法


第三步、开始安装element ui


npm i element-ui -S

这时element-ui已完成安装

在src/main.js/引入element-ui里边的css和js


import ElementUI from 'element-ui' //element-ui的全部组件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI) //使用elementUI
Vue.config.productionTip = false
在App.vue里复制官方代码



  <template>
    <div id="app">
      <img src="./assets/logo.png">
      <h1>{{ msg }}</h1>
      <el-button @click.native="startHacking">Let's do it</el-button>
      <div class="block">
      <span class="demonstration">显示默认颜色</span>
      <span class="wrapper">
      <el-button type="success">成功按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      </span>
      </div>
      <br/>
      <div class="block">
        <span class="demonstration">hover 显示颜色</span>
      <span class="wrapper">
      <el-button :plain="true" type="success">成功按钮</el-button>
      <el-button :plain="true" type="warning">警告按钮</el-button>
      <el-button :plain="true" type="danger">危险按钮</el-button>
      <el-button :plain="true" type="info">信息按钮</el-button>
      </span>
      </div>
    </div>
  </template>
  <script>
  export default {
    data () {
      return {
        msg: 'Use Vue 2.0 Today!'
      }
    },

    methods: {
      startHacking () {
        this.$notify({
          title: 'It Works',
          message: 'We have laid the groundwork for you. Now it\'s your time to build something epic!',
          duration: 6000
        })
      }
    }
  }
  </script>

  <style>
  body {
    font-family: Helvetica, sans-serif;
  }
  </style>


效果图:

出现以上效果图,表示element已安装完成,继续折腾吧,加油

更多技术文章欢迎关注极客园



点赞(0) 打赏

Comment list 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部