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/components下new 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文件夹，将里面的static和index.html复制到nginx下的webapps的demo1文件夹下(自己新建)
2. 然后同样需要配置nginx的代理转发：修改conf/nginx.conf的server部分，添加如下代码,(记得保存)

        location /api { # 去除/api
            rewrite   ^(.*)\/api(.*)$   $1$2;
        }

        location /interface { # 转发
            proxy_pass   http://siwei.me;
        }

4. 通过cmd启动nginx start nginx
   就可以访问 http://localhost:80/demo1/#/（默认端口80）
5. 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操作


克隆项目