码迷,mamicode.com
首页 > 其他好文 > 详细

vue及ElementUI环境搭建

时间:2018-04-27 13:43:18      阅读:278      评论:0      收藏:0      [点我收藏+]

标签:完成   dev   main   public   浏览器   定义   htm   目录   element   

1. nodejs安装及npm安装

  • 下载地址:https://nodejs.org/en/download/
  • 选择windows Installer
  • 下载完成后 运行node-v8.11.1-x64.msi
  • 重启电脑后,node和npm都安装完成
  • 通过 node -v 和 npm -v 命令验证是否按照成功
  • npm 安装太慢,可以切换成淘宝npm镜像cnpm,安装命令

     npm install -g cnpm --registry=https://registry.npm.taobao.org
  • cnpm -v 验证是否安装成功

2. vue安装

  • 全局安装vue-cli
npm instsall -g vue-cli

3. 初始化vue项目

# demo是项目名
vue init webpack demo
  • 接下来会有一些初始化的设置,其中vue-router是路由,反正我都会选择安装,其他的可以回车跳过或者选择no
  • 按照提示,cd到新建的项目下,运行npm install
  • 运行npm run dev
  • 到这里,不出意外的话可以在浏览器里面看到Vue的初始化模板了,如果没有可能是端口号被占用,这里就将配置文件config/index.js里面的端口号改掉就可以了
  • 另外还要补充一下,最后的打包如果在本地起服务器运行打包后的文件是无法运行的,会报错404,所以这里将assetsPublicPath里面的 "/"改成"./"

4. 安装ElementUI

  • cd到当前项目 运行 npm i element-ui -S
  • 打开src目录下的main.js , 修改如下:
    ``` js
    import Vue from ‘vue‘
    import App from ‘./App‘
    import router from ‘./router‘
    import ElementUI from ‘element-ui‘
    import ‘element-ui/lib/theme-chalk/index.css‘

Vue.config.productionTip = false

/* eslint-disable no-new */
Vue.use(ElementUI)
new Vue({
el: ‘#app‘,
router,
components: { App },
template: ‘
})
```

  • 在components目录下,修改HelloWorld.vue, 在template内加入如下代码:
   <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>
  </div>

-- 执行命令 npm run dev,就可以看到elementUi是否成功

5. 打包

  • 在项目目录下运行 npm run build 运行完成之后会在项目里面增加一个dist的目录,直接把这个目录丢给服务器就好了,dist目录的名字可以自定义在配置文件里面

vue及ElementUI环境搭建

标签:完成   dev   main   public   浏览器   定义   htm   目录   element   

原文地址:https://www.cnblogs.com/Bonker/p/8961684.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!