创建vue项目空框架

Vue3.x脚手架的安装

  我们先检测有没有安装node和npm

   node -v  //检测是否安装了node

   npm -v   //检测是否安装了npm

   cnpm -v  // 检测是否安装了cnpm   cnpm 是国内的工具,方便以后我们下载其他的依赖,用cnpm比较快

 检测是否安装了vue3.x版本

  vue -V    //检测vue是否安装

  // 如果没有安装的情况下,我们全局安装

   cnpm install  -g  @vue/cli@3.12.1 ###安装Vue3的版本  全局安装 

 通过vue3创建项目

 // vue3 创建项目

 vue create   项目名

 第一步   选择安装方式,我们选择手动安装

第二步   我们安转需要的插件 Babel,Router路由 vuex

 

第三步  是否选择历史路由模式 , 我们选择 N(是大写的N) no 的意思

第四步   配置文件走默认的

   

第五步   是否配置保存 N(大写的n)

 

然后我们等着他下载完成,中途最好不要断网

当我们所有的依赖都安装完成后

cd  项目目录

npm run serve   // 启动目录

启动成功后的内容

vue的目录结构

接下来我们安装axios,用来请求后端请求的路由地址

// 安装axios的依赖包,一定一定要在项目的目录中安装,否则无效

cnpm i axios --save

接下来配置依赖包/src/main.js 中入口的js文件 配置到实例化对象上面

// 配置axios

import axios form 'axios'   // 导入axios 的依赖包

Vue.prototype.$axios = axios // 把axios加入Vue的原型中去

当我们配置完成后,我们可以尝试使用  通过axios调用express定义的接口,Home.vue 里面写

一般情况下,肯定会报错的问题,是跨域的问题,出现报错的信息如下:

我们来解决这个问题,express框架中安装core插件,解决跨域

cnpm i cors --save

//在app.js中进行配置

var app = express()

//配置cors插件

var cors = require('cors')

app.use(cors())

我们配置完成后,然后重启项目

ctrl c c   // 关闭之前运行的项目

npm run serve    // 启动项目

到这就配置完成啦,我们就可以随意发挥了.................