在HBuilder中怎么创建Vue项目

软件信息：HBuilder X 3.1.18

1、新建Element-UI项目

2、更改App.vue内容

3、在src中创建router文件夹并新建index.js文件

4、在src中创建components文件夹存放组件

5、在src中创建views文件夹存放页面

6、在main.js文件中配置路由

7、下载vue-router和vue-axios

1、新建Element-UI项目

2、更改App.vue内容

<template><div id="app"><router-view></router-view></div>
</template><script>
export default {methods: {}}
}
</script><style>
#app {font-family: Helvetica, sans-serif;text-align: center;
}
</style>

3、在src中创建router文件夹并新建index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'
//导入组件
// import Index from '../views/index.vue'
// import Xq from '../views/xq.vue'//安装路由
Vue.use(VueRouter)//配置导出路由
export default new VueRouter({mode: 'history',routes: [// 动态路径参数 以冒号开头 path: '/user/:id',// {//     //路径//  path: '/',//  //起名字//     name: 'Index',//  //组件//  component: Index// }// ,// {//  //路径//  path: '/detail/:bookid',//    //起名字//     name: 'Detail',//     //组件//  component: Detail// }]
})

4、在src中创建components文件夹存放组件

5、在src中创建views文件夹存放页面

6、在main.js文件中配置路由

import router from './router/index.js'
import axios from 'axios'
import VueAxios from 'vue-axios'Vue.prototype.$httpApi = axios
Vue.use(VueAxios, axios)

7、下载vue-router和vue-axios

在终端中依次执行以下命令

npm install vue-router

npm install --save axios vue-axios

如果出现以上错误说明版本不兼容，尝试以下命令

npm install vue-router@3.2.0

根据提示再进行修复

npm audit fix

或者

npm audit fix --force

在package.json中可以查看到vue的版本

在HBuilder中怎么创建Vue项目相关推荐

idea中创建vue项目
idea构建vue项目首先确保电脑上安装了node.npm.cnpm(淘宝镜像)下载依赖比较快.webpack打包工具.vue-cli构建项目结构的脚手架,相当于我们做ppt时选择样式的工具.其中的 ...
创建vue项目+总结使用(跨域问题+vue 创建)
创建vue项目: -安装node.js-vue脚手架-vue create 项目名字pycharm开发vue项目-需要安装vue.js插件-setting--->plugins--->左下 ...
ui vue 创建项目教程并关闭语法_使用vue ui命令创建vue项目步骤
1.前置环境 1.node.js 2.vue-cli 3.webstorm 2.创建步骤 1.在webstorm中打开一个终端,输入 #vue ui 运行结束后,会启动一个web服务用以可视化创建vu ...
一篇文章教会你创建vue项目和使用vue.js实现数据增删改查
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
vue的使用（引用/创建vue项目）（一）
在程序开发中,有三种方式创建vue项目,本地引入vuejs.使用cdn引入vuejs.使用vue-cli创建vue项目.其中vue-cli可以结合webpack打包工具使用,大大方便了开发步骤,使用广 ...
创建vue项目(二)引入elementUi、axios、准备静态资源、封装组件（.vue，js代码等）
下载安装node -> vue-cli -> 配置路由 -> 引入elementUi -> 公共组件一.引入elementUi 顺便一提axios使用说明和axios在vu ...
Vue学习笔记一创建vue项目
1:安装Node.js Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.可以搜索Node.js的官网下载,安装完成后,打开命令提示符cmd.exe,输入node ...
list vue 添加数据方法_一篇文章教会你创建vue项目和使用vue.js实现数据增删改查...
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
使用UI创建vue项目并添加element ui和axios
目录简介 Vue简单安装说明项目创建步骤总结简介因为最近一个项目需要使用SPA的方式,而前端选择使用vue来实现.所以最近重新看了下vue的相关知识,发现最新的vue项目可以在web中使用界 ...

在HBuilder中怎么创建Vue项目

1、新建Element-UI项目

2、更改App.vue内容

3、在src中创建router文件夹并新建index.js文件

4、在src中创建components文件夹存放组件

5、在src中创建views文件夹存放页面

6、在main.js文件中配置路由

7、下载vue-router和vue-axios

在HBuilder中怎么创建Vue项目相关推荐

最新文章

热门文章