一、构建vue+elementUI+axios前端项目
一、安装node.js1、下载完成后，双击安装包，开始安装Node.js，绝大多数步调直接下一步即可。
此处可根据个人需求修改安装路径，修改完毕后继续点击【Next】按钮
https://i-blog.csdnimg.cn/direct/fc6f76a115e04808a7b0d30a78ed8091.png
此处不选中，直接点击【Next】按钮
https://i-blog.csdnimg.cn/direct/9c609ba184bb41dab6cd0ec60b8a6ef2.png
2、测试安装是否成功，按下【win+R】键，输入cmd，打开cmd窗口输入：
node -v // 表现node.js版本
npm -v // 表现npm版本
成功表现版本分析安装成功
https://i-blog.csdnimg.cn/direct/59923a3ad0b84c68a27f70e0975bce81.png
二、环境设置(可选)
此步调是为方便管理下载的依赖包，不举行这一步也可以
1、找到刚刚安装的目录，右键node.js文件夹->属性->安全->编辑
https://i-blog.csdnimg.cn/direct/048b7e16c7754627a8c7555ce931dd9d.png
选择Users->完全控制处勾选允许->点击应用
https://i-blog.csdnimg.cn/direct/abed6d75762c48279a1bc55824a26b53.png
进入node.js目录，在目录下新建两个文件夹【node_global】和【node_cache】。
https://i-blog.csdnimg.cn/direct/e0e669f3f4b5427ea91168d079c6ee47.png
2、创建完毕后，在cmd下令分别输入以下三条下令，都没有消息回馈。
https://i-blog.csdnimg.cn/direct/ff9495914b3f4f949dd566da32c6b8d8.png
①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 举行验证，如下三条修改结果与预期结果划一即可。
https://i-blog.csdnimg.cn/direct/3d993af3fcc641faa45c23f8625ecdac.png
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的项目。
https://i-blog.csdnimg.cn/direct/1c8788c273d746a0a2ab50922eae6a7e.png
5、选择手动设置 选择下面四个选项
https://i-blog.csdnimg.cn/direct/7f59aa94020f4048826620491d70b420.png
https://i-blog.csdnimg.cn/direct/e2745fc96f7d41c6baf57be666893320.png
6、vue版本2.0或者3.0都可以，这里选择2.0；use history mode 选择是；css预处理器选择Less
https://i-blog.csdnimg.cn/direct/3a93256ae0f3456ea1aafadb35ef415d.png
7、存放设置选择到json文件
https://i-blog.csdnimg.cn/direct/8dfa550683bb47dea38bca60185a18d4.png
8、生存设置 选y 方便下次构建项目 ；并为设置取个名字。
https://i-blog.csdnimg.cn/direct/6b4add2abb134cf5b8f33fa4894a2588.png
9、以后创建项目可以直接选择 之宿世存的设置
https://i-blog.csdnimg.cn/direct/44933ed82232461dbe4e4a57e7d74488.png
10、设置好后使用webstorm或者idea（以管理员身份运行）打开天生的项目即可。
如果前后端都用idea打开，选择new window打开即可。
https://i-blog.csdnimg.cn/direct/9c18eff72cb04ec89b8b87e91fda1e64.png
四、项目添加axios以及element ui
1、在项目中打开终端
https://i-blog.csdnimg.cn/direct/4c5390bd0aac4d79bdce5394dc72e9c8.png
2、分别输入
// （-S前面有空格，-ui前面没有）
npm install element-ui -S
// （-S前面有空格，-ui前面没有）
npm install --save axios vue-axios https://i-blog.csdnimg.cn/direct/e2b4c7dec2ae43c38e151b483da5736c.png3、在项目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); https://i-blog.csdnimg.cn/direct/33a8aa640fa347b0a7d2205cf914083f.png
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启动项目
https://i-blog.csdnimg.cn/direct/2f04c2f7ccd0421d8801f40515bb457e.png
5、项目目录下创建（可选）
项目下创建.env 可以同一设置访问所在的公共头部分
src下创建main.less 可以同一设置 将一些样式的值定义成变量方便维护
src下创建global.js 可以同一设置一些变量（不能被绑定）
src下创建Bus.js 创建总线可以实现兄弟组件间传参而不借用父组件
store下的index.js 可以设置一些简单参数 状态管理
把静态资源放在public下 肯定可以访问到
项目下的vue.config.js可以更改访问端口，避免与服务端冲突
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]