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

前端使用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