一：搭建项目

1.框架

　　在原有的基础上

　　

　　src：

　　

2.index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="app">

        <p>222</p>

    </div>

</body>

</html>

　　

3.main.js

// js的主要入口

console.log("ok")

//导入vue

import Vue from 'vue'

//引入App.vue

import app from './App.vue'

//按需导入mint-mi下的Hearer

import { Header } from 'mint-ui';

Vue.component(Header.name, Header);

//导入mui的样式

import './lib/mui/css/mui.min.css'

//Vue实例新建

var vue = new Vue({

    el:'#app',

    render:c=>c(app)

})

　　

4.App.js

<template>

  <div class="app-container">

    <!-- 顶部 Header 区域 -->

    <!-- 使用mint-ui -->

    <mt-header fixed title="程序员的项目"></mt-header>

    <!-- 中间的 路由 router-view 区域 -->

    <!-- 底部 Tabbar 区域 -->

    <nav class="mui-bar mui-bar-tab">

      <a class="mui-tab-item mui-active" href="#tabbar">

        <span class="mui-icon mui-icon-home"></span>

        <span class="mui-tab-label">首页</span>

      </a>

      <a class="mui-tab-item" href="#tabbar-with-chat">

        <span class="mui-icon mui-icon-email">

          <span class="mui-badge">9</span>

        </span>

        <span class="mui-tab-label">消息</span>

      </a>

      <a class="mui-tab-item" href="#tabbar-with-contact">

        <span class="mui-icon mui-icon-contact"></span>

        <span class="mui-tab-label">通讯录</span>

      </a>

      <a class="mui-tab-item" href="#tabbar-with-map">

        <span class="mui-icon mui-icon-gear"></span>

        <span class="mui-tab-label">设置</span>

      </a>

    </nav>

  </div>

</template>

<script>

</script>

<style lang="scss" scoped>

.app-container {

  padding-top: 40px;

  overflow-x: hidden;

}

</style>

　　

5.效果

二：修改框架的其他部分

1..gitignore

node_modules

.idea

.vscode

.git

　　

2.README.md

# 这是一个测试的项目

## vue项目

### CJ

　　

3.拷贝一个Lincese

三：Git

1.初始化

　　

2.添加项目

　　提交在本地了

　　

3.

015 vue的项目的更多相关文章

  1. vue新建项目

    一直都被如何用vue.js新建一个项目的问题困扰着,经过好久的实践,终于搞清楚如何用vue新建项目了: 1.官网对于vue-cli介绍: Vue.js provides an official CLI ...

  2. Vue.jsbrowserify项目模板

    Vue.js——60分钟browserify项目模板快速入门   概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定 ...

  3. Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目

    [TOC] 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admi ...

  4. Vue 实际项目中你可能会遇见的坑

    纸上得来终觉浅,绝知此事要躬行! Vue的文档和教程看的太多,小的demo做的多,也不如自己实际的进行一个完整项目的开发.只有做了才知道原来问题这么多,这里列举了一些你做demo教程可能不会遇见的坑. ...

  5. vue.js项目构建

    这里构建的vue.js项目依赖node服务器运行. 项目搭建完整步骤: 安装node.js ,转至nodeJs网站http://nodejs.cn/ 下载nodeJs进行安装. 安装完毕检查nodeJ ...

  6. vue.js项目安装

    Vue.js 安装 NPM 方法安装vue.js项目 npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3.0 #升级 npm npm install np ...

  7. vscode下面开发vue.js项目

    vscode下面开发vue.js项目   https://blog.csdn.net/linzhiqiang0316/article/details/79176651 vscode下面开发vue.js ...

  8. vue的项目结构记录

    vue的项目结构 不知道大家有没这样的情况,面对刚配置好的脚手架,创建的文件不知道该放哪个文件下,导致后面开发一些文件不好找,不利于维护. 接下来我说说我项目中的一些文件: 首先是components ...

  9. Vue小项目二手书商城：（四）详情页和购物车（emit、prop、computed）

    实现效果: 点击对应商品,对应的商品详情页出现,详情页里面还有“Add to cart”按钮和“×”退出按钮. 点击“Add to cart”可以将商品加入购物车,每件商品只能添加一次,如果把购物车的 ...

随机推荐

  1. RabbitMQ基本概念（三）-Centos7下安装RabbitMQ3.6.1

    如果你看过前两章对RabbitMQ已经有了一定了解,现在已经摩拳擦掌,来吧动手吧! 用什么系统 本文使用的是Centos7,为了保证对linux不太熟悉的伙伴也能轻松上手(避免折在安装的路上),下面是 ...

  2. prometheus学习系列十一： Prometheus 报警规则配置

    prometheus监控系统的的报警规则是在prometheus这个组件完成配置的. prometheus支持2种类型的规则,记录规则和报警规则, 记录规则主要是为了简写报警规则和提高规则复用的, 报 ...

  3. vue2.0 在页面中使用process获取全局路径的时候 报错 process is not defined

    如果是刚配置好的全局变量需要 重新启动一下vue才能通过proccess.env.xxx 获取到 如果想在html中使用 需要在data中声明一个变量 然后在vue生命周期中 将process.env ...

  4. Ecshop 2.x-3.x RCE漏洞复现

    说是复现,其实来源于一道CTF题目(Ecshop3.x RCE) 链接:http://www.whalwl.cn:8030 1. 漏洞概述 ECShop的user.php文件中的display函数的模 ...

  5. JFrog杰蛙DevOps平台

    https://www.jfrog.com/confluence/display/XRAY/Welcome+to+JFrog+Xray

  6. 数字转datetime格式

    原数据:int型 转成年月日 时分秒的形式 source_test['happenTime'] = source_test['happenTime'].map(lambda x:str(x)) sou ...

  7. php单例型(singleton pattern)

    搞定,吃饭 <?php /* The purpose of singleton pattern is to restrict instantiation of class to a single ...

  8. Jmeter中Switch Controller逻辑控制器用法

    当Switch Controller中Switch Value设置为0时,执行第0+1个子节点:Switch Value设置为1时,执行第1+1个子节点:Switch Value设置为2时,执行第2+ ...

  9. 2019牛客暑期多校训练营（第九场）B：Quadratic equation （二次剩余求mod意义下二元一次方程）

    题意:给定p=1e9+7,A,B.  求一对X,Y,满足(X+Y)%P=A; 且(X*Y)%P=B: 思路:即,X^2-BX+CΞ0;  那么X=[B+-sqrt(B^2-4C)]/2: 全部部分都要 ...

  10. 重构之字段改名 UML行为图 用例图 时序图&协作图 状态图&活动图 依恋情结

    简单的使用一下字段改名 为什么使用字段改名: ​ 你在一个软件上做的工作越多,对这个软件的数据的理解就越深刻,你需要把这些理解融入到代码中.利用名字的解释作用,让代码更容易被理解. 如何找到该变量的所 ...