node.js-＞vue项目打包部署-＞项目导入vscode-＞引入ElementUI-＞引入axios

最新推荐文章于 2024-08-07 09:48:40 发布

原创最新推荐文章于 2024-08-07 09:48:40 发布 · 653 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍Node.js的安装配置过程及Vue项目的搭建步骤，包括环境变量设置、Vue CLI脚手架工具安装、项目创建与运行、Element UI集成等。

1.下载node.js

http://nodejs.cn/download/

2.安装，一路next.（安装路径：F:\vue_node）

3.开始->点击Node.js command prompt

4.node -v，npm -v 查看版本

5.安装路径F:\vue_node下，新建node_cache和node_global文件夹。

设置缓存文件夹：npm config set cache "F:\vue_node\node_cache"；

全局模块存放路径：npm config set prefix "F:\vue_node\node_global"。

6.淘宝镜像npm install cnpm -g --registry=https://registry.npm.taobao.org

7.检验cnpm

提示cnpm -v 不是内部命令。需要设置cnpm环境变量。

此电脑->右键->属性->高级系统设置->环境变量->新建系统变量NODE_PATH，

path下添加%NODE_PATH%。这样就可以全局使用cnpm。

使用cnpm -v，说明配置成功。

8.安装vue-cli脚手架构建工具

cnpm install -g @vue/cli

vue -V，安装成功。

9.创建工程目录F:\projects_vue；

cmd进入工程目录

10.创建项目

vue create demo01

需要一些时间。

看到创建项目成功了。

cd vue_demo01，cnpm run serve启动。

11.打开浏览器http://localhost:8080/，看到页面成功显示。

12.打包：npm run build

13.安装express-generator部署项目：

cnpm install express-generator -g

express expressDemo

cd expressDemo

将打包好的dist下的所有文件，复制到expressDemo的public下

cnpm install

npm start

访问http://localhost:3000/，部署成功。

14.vscode引入项目

15.加入ElementUI,

cd F:\projects_vue\vue_demo

cnpm i element-ui --save

cnpm i --save axios，用来发送http请求，获取数据。

16.项目中引入element-ui，axios

17.关于axios,在项目中的应用：

this.$axios({
              method:'post',
              url:'/auth/dologin',
              data:{
                username: 'admin',
                password: '123'
              }
            }).then(res=>{
                console.log(res);
            })