新类型 网站,福田保安公司招聘,旅店网站建设规划书,自己建一个简单的网站前端使用Vue.js作为前端开发框架#xff0c;使用Vue CLI3脚手架搭建项目#xff0c;使用axios作为HTTP库与后端API交互#xff0c;使用Vue-router实现前端路由的定义、跳转以及参数的传递等#xff0c;使用vuex进行数据状态管理#xff0c;后端使用Node.jsexpress#xf… 前端使用Vue.js作为前端开发框架使用Vue CLI3脚手架搭建项目使用axios作为HTTP库与后端API交互使用Vue-router实现前端路由的定义、跳转以及参数的传递等使用vuex进行数据状态管理后端使用Node.jsexpress连接Mysql数据库。 1. 确定电脑上已经安装了Node.js 如果已经安装了Node可以通过cmd查看版本号。Node.js包含npm这在之后要使用npm命令安装axios。 如果没有安装可以直接到官网上下载最新版的node.js官网地址Node.js — 下载 Node.js® 2. 创建项目 1先创建一个项目的根目录如在D盘创建项目文件夹D/MoreMall。注这个前后端的总文件夹 2使用Vue CLI3脚手架搭建项目先确保安装了Vue CLI3。 要检查是否安装了Vue CLI 3可以在cmd命令行中运行以下命令 vue --version 如果Vue CLI 3已安装该命令将输出Vue CLI的版本号。如果没有安装或者不是最新版本可以通过以下命令安装或更新 npm install -g vue/cli Vue CLI 已经安装成功且提示可以升级。 3可以直接在HBuilder X项目中创建项目client。 创建好项目后如下: 3. 安装axios axios作为HTTP库与后端API交互所以要安装但是在安装axios之前要先创建配置文件在项目的src目录下创建配置文件夹config在config文件夹下创建文件index.js文件。 1创建config文件夹client右键-新建-目录。 2创建index.js文件config右键-新建-js文件。 3填写index.js的内容 文件位置client/src/config/index.js
export default{title:MoreMall,baseURL:{//开发时后台接口development:http:/127.0.0.1:3000/api, //填写自己的API地址//生产时后台接口testproduct:/}
} 结果如下 4安装axios 这个要通过cmd命令行来安装先要进入项目的根目录文件夹。 之后使用命令npm install axios 安装成功后后会在项目的node_modules文件夹下增加很多组件。 4. 配置axios 安装完成后在src文件夹下新建api子文件夹在api下新建文件axios.js完成相关配置。 1创建api文件夹src右键-新建-目录。Api是插件目录用来存放axios配置以及相关接口文件。 2创建axios.js文件api右键-新建-js文件。 3填写axios.js的内容 文件位置client/src/api/axios.js 结果如下 5. 创建页面文件目录 在src目录下创建views文件夹用于存放页面文件。 6. 项目的目录说明
node_modules存放组件文件系统组件和第三方组件
Public存放公共文件
Src/apiApi是插件目录用来存放axios配置以及相关接口文件
Src/assets资源文件目录
Src/components组件文件目录自定义组件
Src/config配置文件目录
Src/views页面文件目录
App.vue项目入口根文件
main.js项目入口文件。
