Vue Cli 环境搭建及 Vue Element 环境搭建

Vue 环境搭建及项目创建的小短文，不涉及技术点，日常整理与记录

若有遇到什么问题，非常欢迎在评论中留言，我和其他读者小伙伴们将帮助解决并持续更新至此文，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！

---

Vue Cli 环境搭建

Node 安装

https://nodejs.org/en/

cmd node -v 查看安装结果及版本号

---

NPM 依赖

NPM，Node Package Manage，

cmd npm -v 查看安装结果及版本号

https://www.npmjs.com/ 查看更多插件

---

Vue Cli 安装

https://cli.vuejs.org/zh/guide/installation.html

选择 左侧 【安装】

cmd npm install -g @vue/cli (-g 表示全局安装)
或者
cmd yarn global add @vue/cli

cmd vue --version 查看安装结果及版本号

---

cnpm

特别提示：推荐淘宝提供的npm镜像，下载插件更快：https://npm.taobao.org/

cmd $ npm install -g cnpm --registry=https://registry.npm.taobao.org

cmd cnpm --version

---

最终安装情况

---

创建 Cli 项目

确定项目存储目录为 D 盘

cmd

D:
cd D:\xxx\xxx\xxx

创建项目

vue create project_name(项目名称)

之后根据提示和你的需求选择并继续

最终提示如下表示创建成功

启动 Cli 项目

cd 至项目

cd project_name(项目名称)

启动项目

npm run serve

最终提示

使用浏览器打开提示中的地址 http://localhost:8080/

表示项目启动成功

在 cmd 中使用 Ctrl + c 表示关闭项目

浏览器再次访问 http://localhost:8080/ 将会提示

再次启动服务同样执行

npm run serve

---

Vue 项目目录

---

引入 element-ui

检查当前 npm 版本号，若低于 3.0 则需要升级

npm -v

安装 vue-router

cnpm install vue-router

安装 element-ui

cnpm i element-ui -S

在 main.js 中添加依赖关系

import Vue from 'vue';
import ElementUI from 'element-ui'; // 1
import 'element-ui/lib/theme-chalk/index.css';  // 2
import App from './App.vue';

Vue.use(ElementUI);  // 3
Vue.config.productionTip = false


new Vue({
  render: h => h(App),
}).$mount('#app')

创建一个新vue组件并在页面中使用 element-ui 的元素

<template>
  <div class="main">
    <el-button>{{ loginBtn }}</el-button>
    <el-button type="text">{{ registerBtn }}</el-button>
  </div>
</template>

<script>
export default {
  name: "UserLogin",
  data() {
    return {
      loginBtn: "用户登录",
      registerBtn: "用户注册"
    };
  },
  props: {
    msg: String
  }
};
</script>

<style scoped>
</style>

修改 App.vue 中 HelloWorld 指向的地址，更新至最新的 vue 组件，保存运行

浏览器刷新 http://localhost:8080/

更多 Element 配置：https://element.eleme.cn/#/zh-CN/component/custom-theme

---

若您有遇到其它相关问题，非常欢迎在评论中留言，我和其他读者小伙伴们将帮助解决并持续更新至此文，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！