文档章节

前后端分离-前端搭建(vue)

 咸鱼-李y
发布于 05/23 22:56
字数 761
阅读 22
收藏 2

前端使用vue,那么怎么搭建vue呢

 

先安装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命令也可以在软件(就是下面说的那个前端开发软件)中去执行

 

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

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

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

 

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

和idea同样的快捷键 

下载好了前端软件后,打开

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

 

 

大致框架如下

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

同样是在src里面进行开发

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

对于开发者来说,以后 99.99% 的工作都是在 src 中完成的,src 中的文件目录如下:

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

 

 

 

© 著作权归作者所有

粉丝 9
博文 44
码字总数 39670
作品 0
深圳
私信 提问
Febs Vue 版发布,基于 Spring Boot 的权限管理系统

一款基于 Spring Boot,Shiro,Vue 的前后端分离权限管理系统,前端组件采用 ant-design-vue。 预览地址 服务器带宽小,初次加载较慢,请耐心等待:http://111.230.157.133:8081。 账号密码:...

mrbird
01/28
0
0
Vue实现前后端分离项目的初体验

Vue实现前后端分离项目的初体验 经过之前学习的Vue的知识: vue基本指令 vue组件 vue-resource vue路由 其实我们已经可以开始实战运用到实际的Web项目中了,由于本人是Java后端开发的,所以后...

TyCoding
2018/09/01
0
0
vue菜鸟从业记:公司项目里如何进行前后端接口联调

最近我的朋友王小闰进入一家新的公司,正好公司项目采用的是前后端分离架构,技术栈是王小闰非常熟悉的vue全家桶,后端用的是Java语言。 在前后端开发人员碰面之后,协商确定好了前端需要的数...

闰土大叔
2018/07/05
0
0
前端用户权限控制解决方案Vue-Access-Control宣布开源

Vue-Access-Control宣布开源。 随着前后端分离架构的流行,权限控制这个曾经陌生的话题开始进入很多前端同学的视野,作为一名前端,可能部分同学会认为权限是后端的事,其实这个想法是片面的...

特欧威尔
2017/12/01
0
0
vue+node实现前后端分离

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wen_special/article/details/89217813 之前一直听说前后端分离好,但从来没有自己动手实践过!因为发现了对于...

wen_special
04/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mac环境编译facets

facets是Google开源的数据可视化工具。首页:https://pair-code.github.io/facets/。 体验:https://colab.research.google.com/github/PAIR-code/facets/blob/master/colab_facets.ipynb#sc......

孟飞阳
11分钟前
0
0
代码保护软件VMProtect用户手册控制面板“项目”部分都有哪些功能?

VMProtect是一种很可靠的工具,可以保护应用程序代码免受分析和破解,但只有在应用程序内保护机制正确构建且没有可能破坏整个保护的严重错误的情况下,才能实现最好的效果。 【下载VMProtect...

mnrssj
16分钟前
0
0
房子在买入两年后出手要涨幅多少才能保证不亏(粗略计算)

7日年化收益率12% 属于高利贷么 首先,将年化转换为日化的1w的日收益 0.12*10000/365 = 3.19 我们看一下余额宝7日年化2.485%1w的日收益 0.02485*10000/365 = 0.68 借贷双方约定年利率 年利率...

小小明童鞋
16分钟前
91
1
rapidjson之原位解析(Insitu parse)

什么是原位解析 一种空间复杂度为O(1)的解析方式。正常解析方式需要将JSON字符串复制到其他缓冲区进行解析,这样将会消耗时间和空间复杂度。而原位解析则在JSON字符串所在的原空间进行操作,...

SibylY
18分钟前
0
0
使用gradle打包

安装包到https://gradle.org/下载 然后 将文件解压到自定文件夹,配置环境变量 新建环境变量 GRADLE_HOME,即 D:\usr\local\gradle-2.4; 修改环境变量 Path,即追加 %GRADLE_HOME%\BIN; 打包...

青峰Jun19er
21分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部