从零开始做项目-1（vue+Element UI）

Vue官网
https://cn.vuejs.org/
Element-UI官网
https://element.eleme.cn/#/zh-CN
官网里面都有教程

一.Vue

渐进式
JavaScript 框架

二.Vue安装

1.安装node.js
node.js中文网下载网址http://nodejs.cn/download/
下载安装后，打开命令行（win+r 输入cmd）输入node -v 查看node的版本号，若显示如图则安装成功。安装完node.js也就有了npm管理器，它是集成在node中的，输入 npm -v 命令，显示npm的版本信息。

安装cnpm
命令行：npm install -g cnpm --registry=http://registry.npm.taobao.org

命令行：npm install -g @vue/cli 安装脚手架

三.使用vue

1.创建vue项目
首先，找一个准备项目的文件夹。然后命令行进入该文件夹，输入vue create 项目名 或 vue init webpack 项目名。
下载（初始化）完成后会出现这样的字样

蓝色字体 cd test_1 跳转到项目目录
npm run serve运行项目
npm run dev(2.版本运行命令)
现在就可以通过localhost:8080访问项目了

四、目录解析

build 项目构建(webpack)相关代码，目前基本没动过
config 配置目录，包括端口号等。我们初学可以使用默认的，目前基本没动过
node_modules npm 加载的项目依赖模块，目前基本没动过
src 要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件
assets: 放置一些图片，如logo等。
components: 目录里面放了一个组件文件
App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
main.js: 项目的核心文件。
static 静态资源目录，如图片、字体等。
test 初始测试目录，可删除
.xxxx文件 这些是一些配置文件，包括语法配置，git配置等。
index.html 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档，markdown 格式
五.Element-UI导入
1.导入axios和Element-UI
项目目录下命令行 cnpm install axios 和 cnpm i element-ui -S
2.在main.js中设置导入
import ElementUI from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’
import axios from ‘axios’
Vue.prototype.$axios = axios;
Vue.use(ElementUI)
Element-UI和axios就可以在项目中应用了。