基础安装
1.安装node.js
下载地址:https://nodejs.org/en/download/
接着就使用管理员身份打开CMD,在打开的命令行界面,依次输入命令回车:
node -v
npm -v
如果正确输出版本号,说明我们的NodeJS和NPM就安装好了,如下图所示:
2.安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
3.安装webpack
使用管理员身份打开CMD,在打开的命令行界面输入:
cnpm install webpack -g
4.安装vue脚手架
使用管理员身份打开CMD,在打开的命令行界面输入:
cnpm install vue-cli -g
5. 开始创建VUE项目
建立文件夹为开发项目使用(如: d:\projects\vue ),在CMD依次输入下列命令中进入该目录:
E:
cd E:\Vue\projects
根据模板创建Vue项目(如 vuedemo),在已进入项目目录下的命令行界面输入:
需要注意的是项目的名称不能大写,不然会报错
vue init webpack vuedemo
直到出现这个填写模板信息的画面:
输入完作者姓名后接下来有3个选项,字体加粗的是我的选择:
Runtime+Compiler:recommended for most users 运行加编译
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时
整个模板信息的填写如下:
依次输入以下命令:
cd vuedemo (进入项目目录)
cnpm install (安装项目依赖)
cnpm run dev (执行项目)
完成
Element-ui安装
官方文档
https://element.eleme.cn/#/zh-CN/component/installation
npm i element-ui -S
在main.js下
// element-ui 前端框架
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// element-ui 前端框架
Vue.use(ElementUI)
使用HelloWorld.vue
<el-button>默认按钮xxx</el-button>
axios 安装
安装
npm install axios
在main.js下
// axios 前后端交互
import axios from 'axios'
// axios 前后端交互
Vue.prototype.axios = axios
使用HelloWorld.vue
created () {
this.axios.post('http://124.71.165.135:8778').then(res => {
console.log('2021年02月05日16:18:45 HelloWorld.vue[null]——[null] :', res)
})
},