vue及ElementUI环境搭建

Posted Bonker

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue及ElementUI环境搭建相关的知识,希望对你有一定的参考价值。

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环境搭建的主要内容,如果未能解决你的问题,请参考以下文章

学习资料2 Vue学习及例子微信小程序.net Core环境部署

elementUI+nodeJS环境搭建

ElementUI_NodeJS环境搭建

一分钟教你快速 搭建Vue脚手架(Vue-Cli)项目并整合ElementUI

一分钟教你快速 搭建Vue脚手架(Vue-Cli)项目并整合ElementUI

ElementUI环境搭建