vue项目

一个简单vue-cli项目

基于vue-cli搭建一个vue新项目,使用webpack,IDE为VS code ,并配置git和部署

安装运行环境、vs code 并新建vue项目

首先安装node.js 下载地址
在这里插入图片描述
然后打开命令行(建议管理员方式打开
在这里插入图片描述
输入 node -v
出现版本号表明安装成功
然后全局安装vue-cli用于快速搭建项目
npm install -g vue-cli
全局安装webpack 用于管理项目资源和依赖

(我已经提前在F盘新建一个vue-demo文件夹,用于存放新建的项目)

在命令行中切换到vue文件夹下:
f:
cd f:vue-demo
然后就可以新建项目 demo1
vue init webpack demo1
其中demo1为项目名
在这里插入图片描述
初始化项目过程 一直回车就行
在这里插入图片描述
每个选项的含义:

初始化完成后,项目就已经创建成功,如下图
在这里插入图片描述
本次使用的IDE是VS Code 下载地址
在这里插入图片描述
这里我勾选添加到资源管理器菜单
在这里插入图片描述

安装完成后启动vs code,打开新建的项目文件夹 demo1
File -> Open Folder
在这里插入图片描述
菜单栏 Terminal -> New Terminal,新建命令行窗口,默认为power shell
安装依赖,输入 npm install
然后热加载运行项目 npm run dev
在这里插入图片描述

在浏览器中打开 http://localhost:8080(默认端口为8080)
运行成功,显示如下在这里插入图片描述
侧边栏:
在这里插入图片描述

vue项目的简单操作

首先安装vetur插件,用于代码自动补全和语法高亮
在这里插入图片描述
新建.vue文件
src/componentsnew file,命名为BlogList.vue

在这里插入图片描述

新建页面,创建路由 并使用ElementUI 的页面布局

Element安装说明
npm i element-ui -S
Ctrl + C 停止运行,然后安装element,并重新启动
在这里插入图片描述
main.js写入如下

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

在这里插入图片描述
在BlogList.vue 中写入如下

<template>
    <div>
        <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
        <el-footer>Footer</el-footer>
        </el-container>
    </div>
</template>
<script>
export default {

}
</script>
<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
</style>

为BlogList.vue新建一个route

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import BlogList from '@/components/BlogList'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/blogs', // http://localhost:8080/#/blogs
      name: 'BlogsList',
      component: BlogList
    }
  ]
})

在这里插入图片描述

页面跳转

假设点击一个按钮显示到博客页面
在HelloWorld.vue增加button及click方法
在这里插入图片描述
在这里插入图片描述

通过接口获取服务器数据

先安装vue-resource用于发送http请求
在这里插入图片描述
在main.js导入并使用

import VueResource from 'vue-resource'
Vue.use(VueResource)

在这里插入图片描述
BlogList.vue 如下获取json
在这里插入图片描述
接口地址 http://siwei.me/interface/blogs/all
BlogList.vue 代码如下

<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-main>
        <div>{{title}}</div>
        <table>
          <tr v-for="blog in blogs" :key="blog.id">
            <td>{{blog}}</td>
          </tr>
        </table>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>
<script>

export default {
  data () {
    return {
      title: '博客页面',
      blogs: []
    }
  },
  mounted () { // 实际访问的地址 http://siwei.me/interface/blogs/all
    this.$http.get('/api/interface/blogs/all').then(
      response => {
        console.info(response)
        this.blogs = response.body.blogs
      },
      response => {
        console.error(response)
      }
    )
  }
}
</script>
<style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  /* line-height: 160px; */
}
</style>


在这里插入图片描述
打开浏览器,已经成功获取json
在这里插入图片描述

vue项目部署到Nginx

首先需要修改config/index.js中build的assetPublicpath (记得保存)

  1. 运行 npm run build
    会生成一个dist文件夹,将里面的staticindex.html复制到nginx下的webappsdemo1文件夹下(自己新建)
  2. 然后同样需要配置nginx的代理转发:修改conf/nginx.conf的server部分,添加如下代码,(记得保存)
        location /api { # 去除/api
            rewrite   ^(.*)\/api(.*)$   $1$2;
        }

        location /interface { # 转发
            proxy_pass   http://siwei.me;
        }
  1. 通过cmd启动nginx start nginx
    就可以访问 http://localhost:80/demo1/#/(默认端口80)
  2. nginx 其他命令
    nginx -s reload每次修改记得重新加载
    nginx -s stop

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在vs code中配置Git

vs code 集成了Git,所以只要将git.exe的路径写入到vs code的设置中即可
点击左下角设置按钮 -> settings,在输入框中搜索git.path
然后将git.exe的路径写入到settings.json
比如: "git.path": "D:/Program Files/Git/bin/git.exe",
在这里插入图片描述
在这里插入图片描述
可以将默认的powershell更换为 git bash
"terminal.integrated.shell.windows": "D:/Program Files/Git/bin/bash.exe",
在这里插入图片描述
保存后重新打开terminal生效
用到的一些命令
git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/biurchen/demo1.git
git push -u origin master
git config --global credential.helper store
git clone https://github.com/biurchen/demo1.git
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
直接在界面上进行 git操作
在这里插入图片描述
在这里插入图片描述
克隆项目
在这里插入图片描述

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值