ToB企服应用市场:ToB评测及商务社交产业平台

标题: 一、构建vue+elementUI+axios前端项目 [打印本页]

作者: 拉不拉稀肚拉稀 时间: 2024-10-27 09:53
标题: 一、构建vue+elementUI+axios前端项目
一、安装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启动项目

5、项目目录下创建（可选）

项目下创建.env 可以同一设置访问所在的公共头部分
src下创建main.less 可以同一设置将一些样式的值定义成变量方便维护
src下创建global.js 可以同一设置一些变量（不能被绑定）
src下创建Bus.js 创建总线可以实现兄弟组件间传参而不借用父组件
store下的index.js 可以设置一些简单参数状态管理
把静态资源放在public下肯定可以访问到
项目下的vue.config.js可以更改访问端口，避免与服务端冲突

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)