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 的元素
{{ loginBtn }}
{{ registerBtn }}
修改 App.vue 中 HelloWorld 指向的地址，更新至最新的 vue 组件，保存运行
浏览器刷新 http://localhost:8080/
更多 Element 配置：https://element.eleme.cn/#/zh-CN/component/custom-theme
若您有遇到其它相关问题，非常欢迎在评论中留言，我和其他读者小伙伴们将帮助解决并持续更新至此文，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！
