vue及ElementUI环境搭建

Posted 2020-11-01 Bonker

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目录的名字可以自定义在配置文件里面