一、构建vue+elementUI+axios前端项目

原创已于 2024-10-22 23:13:09 修改 · 2.3k 阅读

42 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2024-10-11 13:23:33 首次发布

vue 专栏收录该内容

2 篇文章

订阅专栏

一、安装node.js

1、下载完成后，双击安装包，开始安装Node.js，绝大多数步骤直接下一步即可。

此处可根据个人需求修改安装路径，修改完毕后继续点击【Next】按钮

此处不选中，直接点击【Next】按钮

2、测试安装是否成功，按下【win+R】键，输入cmd，打开cmd窗口输入：

node -v // 显示node.js版本

npm -v // 显示npm版本

成功显示版本说明安装成功

二、环境配置(可选)

此步骤是为方便管理下载的依赖包，不进行这一步也可以

1、找到刚刚安装的目录，右键node.js文件夹->属性->安全->编辑

选择Users->完全控制处勾选允许->点击应用

进入node.js目录，在目录下新建两个文件夹【node_global】和【node_cache】。

2、创建完毕后，在cmd命令分别输入以下三条命令，都没有消息回馈。

①npm config set prefix “你的路径\node_global” （复制刚刚所创建的“node_global”文件夹路径）如

npm config set prefix "C:\Program Files\nodejs\node_global"

②npm config set cache “你的路径\node_cache” （复制刚刚所创建的“node_cache”文件夹路径）如

npm config set cache " C:\Program Files\nodejs\node_cache"

3、配置淘宝镜像

npm config set registry https://registry.npmmirror.com

4、输入 npm config list 进行验证，如下三条修改结果与预期结果一致即可。

5、系统环境变量的path中添加

C:\Program Files\nodejs ——nodejs 安装路径

C:\Program Files\nodejs\node_global ——设置的全局prefix路径

三、创建vue项目

1、若未进行步骤二先打开cmd命令行输入

npm config set registry https://registry.npmmirror.com

2、全局安装@vue/cli

npm install -g @vue/cli

3、检查是否安装成功：如果输出版本号，说明安装vue成功

vue --version

4、修改目录到存放前端项目的路径,将C:\javaProject\front替换成自己的目录，创建一个名为demo的项目。

5、选择手动配置选择下面四个选项

6、vue版本2.0或者3.0都可以，这里选择2.0；use history mode 选择是；css预处理器选择Less

7、存放配置选择到json文件

8、保存配置选y 方便下次构建项目；并为配置取个名字。

9、以后创建项目可以直接选择之前保存的配置

10、配置好后使用webstorm或者idea（以管理员身份运行）打开生成的项目即可。

如果前后端都用idea打开，选择new window打开即可。

四、项目添加axios以及element ui

1、在项目中打开终端

2、分别输入

// （-S前面有空格，-ui前面没有）
npm install element-ui -S             

// （-S前面有空格，-ui前面没有）
npm install --save axios vue-axios

3、在项目src下main.js中添加

import axios from 'axios'
import VueAxios from 'vue-axios'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

axios.defaults.withCredentials = true;

Vue.use(VueAxios, axios)
Vue.use(ElementUI);

4、将src下的App.vue下template中内容进行删除,(删除注释的这些行)

<template>
  <div id="app">
    <!--<nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>-->
    <router-view/>
  </div>
</template>

5、删除src下的views下的HomeView.vue中的所有内容，并写自己的代码

6、在终端输入npm run serve启动项目