Vue环境搭建

基础安装
Element-ui安装
axios 安装

基础安装

1.安装node.js

nodejs的安装-1653828776647

接着就使用管理员身份打开CMD，在打开的命令行界面，依次输入命令回车：

node -v
 
npm -v

如果正确输出版本号，说明我们的NodeJS和NPM就安装好了，如下图所示：

查看版本-1653828788742

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)
    })
},

SwordJS