前后端分离-前端搭建（vue）

桃扇骨 2022-01-28 10:25 402阅读 0赞

前端使用vue.js，那么怎么搭建vue.js呢

先安装nodejs以及npm

现在基本的nodejs都包含有npm，下载安装后，

可以在cmd命令里输入

node -v 和npm -v 分别查看安装的版本

两个都显示了版本就是安装ok

nodejs安装成功之后，就安装vue

直接cmd命令里运行

npm install -g vue-cli (只需要第一次安装时执行)

选定一个开发路径

在文件里运行cmd 执行命令

vue init webpack project(文件下的项目名) 初始化你的项目，

cd project 进入你的项目目录里

npm install 下载依赖

npm run dev 启动项目

两个npm命令也可以在软件（就是下面说的那个前端开发软件）中去执行

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzc3l5eXk3_size_16_color_FFFFFF_t_70]

这样弄好后 ，以后启动项目直接在这右上角就可以直接启动了 ，就不用每次都去输入命令

然后在浏览器里输入 [http://localhost:8080][http_localhost_8080]

有个绿色的倒三角形 以及下面一些英文 说明成功了

有个专门的前端开发软件和idea是同一个公司开发的软件 JetBrains WebStorm

和idea同样的快捷键

下载好了前端软件后，打开  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzc3l5eXk3_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20190523230003994.png]

选择这里的open 打开你刚刚创建的vue项目

大致框架如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzc3l5eXk3_size_16_color_FFFFFF_t_70 2]

使用vue开发后端，只有一个静态页面 index.html

同样是在src里面进行开发

1.build 文件夹，用来存放项目构建脚本  
2.config 中存放项目的一些基本配置信息，最常用的就是端口转发  
3.node\_modules 这个目录存放的是项目的所有依赖，即 npm install 命令下载下来的文件  
4.src 这个目录下存放项目的源码，即开发者写的代码放在这里  
5.static 用来存放静态资源  
6.index.html 则是项目的首页，入口页，也是整个项目唯一的HTML页面  
7.package.json 中定义了项目的所有依赖，包括开发时依赖和发布时依赖  
8.对于开发者来说，以后 99.99% 的工作都是在 src 中完成的，src 中的文件目录如下：

![在这里插入图片描述][20190523230038539.png]

1.assets 目录用来存放资产文件  
2.components 目录用来存放组件（一些可复用，非独立的页面），当然开发者也可以在 components 中直接创建完整页面。  
3.推荐在 components 中存放组件，另外单独新建一个 page 文件夹，专门用来放完整页面。  
router 目录中，存放了路由的js文件  
4.App.vue 是一个Vue组件，也是项目的第一个Vue组件  
5.main.js相当于Java中的main方法，是整个项目的入口js

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzc3l5eXk3_size_16_color_FFFFFF_t_70]: /images/20220128/480920d8f8044774acc9fa7511956cc8.png
[http_localhost_8080]: http://localhost:8080
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzc3l5eXk3_size_16_color_FFFFFF_t_70 1]: /images/20220128/ae31f7a42e674272b31f4c5336ca69e3.png
[20190523230003994.png]: /images/20220128/cc2709ade6a64f298c6ccdf1fa3191cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzc3l5eXk3_size_16_color_FFFFFF_t_70 2]: /images/20220128/1a1b37ea2b57494aba243166f6fd1304.png
[20190523230038539.png]: /images/20220128/ce0131d52fc54dfba849c81249ff9988.png