vue安装及配置

2020-10-05 本文已影响0人 kaixingdeshui

vue安装及配置

第一步：下载node.js，并安装

首先下载node.js要求版本在8.9以上官网：https://nodejs.org/zh-cn/

image.png

下载完查看是否安装成功：
在windows任务命令行里输入：node -v 和 npm -v；安装成功会显示版本号，例如：

image.png

第二步：下载淘宝NPM镜像

使用淘宝NPM镜像源下载比较快命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

第三步：安装vue-cli

安装vue-cli（全局安装vue-cli）命令：cnpm install vue-cli -g

cnpm install vue-cli -g

检查环境是否安装上：vue -V

vue -V

第四步：创建VUE项目

创建vue项目：

在命令行里输入命令：vue init webpack test（创建名字为‘test’的文件夹）

image.png

如果在创建项目的时候一直停留在
fetchMetadata:sill pacote range mainfest for ext
是设置镜像源的问题；
可以重新设置下：npm config set registry https://registry.npm.taobao.org

image.png

查看是否设置成功：npm config get registry

然后进入此文件夹：cd test

如果在创建项目的时候选择了依赖，需要手动下载：cnpm install 或者npm install

最后运行程序：npm run dev

image.png

运行之后会导出网址：http://localhost:8080

image.png
在网页上输入上面的网址即可

完整项目文件目录如下：

image.png

简单介绍下命令含义：

npm run dev ：这个dev是package.json文件中的scripts标签下的dev，也就是 node build/dev-server.js命令的一个快捷方式；

image.png

安装element--ui组件

到项目test目录下，cmd窗口，输入命令：
cnpm install element-ui --save

image.png
element--ui组件官网说明文档
https://element.eleme.cn/#/zh-CN/guide/design

在项目的main.js文件里添加

import Element from 'element-ui'
import "element-ui/lib/theme-chalk/index.css"

/*全局使用功能element-ui*/
Vue.use(Element)

安装axios组件

cnpm install axios --save

image.png

在项目的main.js文件里添加

import axios from 'axios'

/*全局使用功能axios*/
Vue.prototype.$axios = axios

vue安装及配置