element-ui 创建第一个项目

最近开始学习前端，在创建第一个项目处就卡了很久，看了很多资料后终于运行成功

一：官方文档

vue：https://cn.vuejs.org/
vue-cli:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create （这个很重要，就是因为没看这个导致我晕头转向，先看基础再看实例，心急吃不了热豆腐）
element-ui:https://element.eleme.cn/#/zh-CN

二： npm的安装和使用

1.下载npm
https://nodejs.org/en/

左边的是推荐版本，右边的是最新版，一般选左边
下好后，安装一路next到底或者更改安装路径，环境变量会自动安装

安装完成后输入指令检测node和npm版本

2.node_cache和node_global
上面的安装如果选择不安装在C盘，依然会有两个文件目录会安装在C盘如下(没见到npm-cache是因为没有用过，一使用缓存目录就生成了)

如果想把这两个文件夹也放到别的盘可以按下面这么做。
首先在安装nodejs的目录下创建这两个文件夹，比如本人是装在e盘下

然后输入下面两个指令

npm config set prefix "E:\ProgramSoft\NodeJs\node_global"
npm config set cache "E:\ProgramSoft\NodeJs\node_cache"

之后可以输入npm list -global检测目录是否改变

同时还要添加环境变量

此文件目录（node_global）是存放用npm install xxx -g 即加入了-g参数安装的包，即全局安装的包

3.设置国内镜像
为了让包能正常下载
①通过下面指令设置npm使用国内镜像

npm config set registry https://registry.npm.taobao.org

使用下面指令验证

npm config get registry

②也可以通过下面指令安装cnpm，以后安装库时用cnpm代替npm，也是使用国内镜像

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

使用方法和npm一样

cnpm install 包名

三、全局安装脚手架环境

输入指令，此指令是安装vue-cli3的

npm install -g @vue/cli

如果想用vue-cli2，可以用npm install -g vue

四、创建webpack项目

1.先切换到要存放项目的目录
2.创建项目
输入
vue create 项目名
然后进入选项（vue-cli2请使用 vue init webpack 项目名）
第一个是默认创建，第二个是自定义创建，按上下选择，回车确认，这里选择自定义

下面是弹出的选项，按空格键选择，回车确认
之后会根据你的每个选择继续选择
选完后等待下载完成

3.启动项目
切换到项目文件夹下，输入指令

npm run serve

（如果是vue-cli2，进入文件夹后，先输入npm install指令安装项目所需包，再使用npm run dev启动）

浏览器中打开页面，如下表示成功了

五、element-ui

1.安装element-ui
输入指令

npm install element-ui -S

S代表save 安装到本地开发者环境中
2.测试
在main.js文件中加入
main.js位置在 “项目路径/src/main.js”

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)//全局使用ElementUI

再进入helloWorld.vue（项目名.vue），位置在 “项目路径\src\components\项目名.vue”
把代码修改如下

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <el-progress type="circle" :percentage="0"></el-progress>
    <el-progress type="circle" :percentage="25"></el-progress>
    <el-progress type="circle" :percentage="100" status="success"></el-progress>
    <el-progress type="circle" :percentage="50" status="exception"></el-progress>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
    }
  }
}
</script>

效果如下
之后就开始入坑慢慢学吧