vue安装

最新推荐文章于 2024-10-13 16:27:14 发布

原创最新推荐文章于 2024-10-13 16:27:14 发布 · 357 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

js 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何安装Node.js、配置cnpm镜像、安装Vue2.0及vue-cli脚手架，并通过具体命令展示了如何创建基于Webpack的新项目、安装依赖及运行项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

edmEdmdInsertArgName: ' '
edmInsertArgDesc: ' '

edmEdmdReturnName:' '
edmReturnDesc:' '

查看版本
node --version
vue --version
npm --version

2、搭建环境步骤
1.安装node

2.安装cnpm镜像
（node自带安装了npm，故不再安装）
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

4.安装Vue2.0
$ cnpm install vue

5.全局安装vue-cli 脚手架工具
$ cnpm install -g vue-cli

6.在某个目录下，创建一个基于 webpack 模板的新项目
$ vue init webpack my-project-name
//my-project-name是你的项目名

7.安装依赖
$ cd my-project-name //到项目目录下
$ cnpm install //安装依赖
cnpm install axios -S //安装之后可以访问后台
cnpm i element-ui -S //安装之后才可以使用element ui

8.运行新创建的vue项目
$ cnpm run dev

获取数据测试：
vue文件加入
import axios from 'axios'

// 加载时运行

created: function () {

var _this = this

axios.get('http://192.168.13.34:2001/v1/methodtypes').then(function (res) {

// 类树

console.log(JSON.stringify(res.data.data))

})

.catch(function (error) {

_this.$message({message: '方法分类树接口调用失败' + error, showClose: true, type: 'error'})

})

}

使用element ui
在 main.js 中写入以下内容：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

Vue.use(ElementUI)