写在了GitHub https://github.com/TaoPanfeng/vue-cms

1 初始化

  • 创建一个文件夹 vue-cms

    • 在vue-cms目录下创建文件 package.json
    • 在vue-cms目录下创建文件webpack.config.js
    • 在vue-cms目录下创建文件.babelrc
    • 在vue-cms目录下创建目录src
      • 在src目录下创建文件index.html
      • 在src目录下创建文件main.js

package.json

{

  "name": "vue-cms",

  "version": "1.0.0",

  "description": "这是我的第一个Vue项目",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "dev": "webpack-dev-server --open --port 2198 --hot"

  },

  "keywords": [],

  "author": "陶攀峰",

  "license": "ISC",

  "dependencies": {

    "babel-core": "^6.26.3",

    "babel-loader": "^7.1.5",

    "babel-plugin-transform-runtime": "^6.23.0",

    "babel-preset-env": "^1.7.0",

    "babel-preset-stage-0": "^6.24.1",

    "bootstrap": "^3.4.1",

    "css-loader": "^3.2.0",

    "file-loader": "^4.2.0",

    "html-webpack-plugin": "^3.2.0",

    "less": "^3.10.3",

    "less-loader": "^5.0.0",

    "mint-ui": "^2.2.13",

    "node-sass": "^4.12.0",

    "sass-loader": "^7.3.1",

    "style-loader": "^1.0.0",

    "url-loader": "^2.1.0",

    "vue": "^2.6.10",

    "vue-loader": "^15.7.1",

    "vue-router": "^3.1.2",

    "vue-template-compiler": "^2.6.10",

    "webpack": "^4.39.3",

    "webpack-cli": "^3.3.7",

    "webpack-dev-server": "^3.8.0"

  }

}

webpack.config.js

//webpack是基于node进行构建的,所以支持node语法

var path = require("path");

//在内存中生成模版页面

var htmlWebpackPlugin = require("html-webpack-plugin");

//vue-loader使用

var VueLoaderPlugin=require('vue-loader/lib/plugin');

//当以命令行运行webpack 或 webpack-dev-server ,工具会发现我们没有执行入口或出口文件

//这时会检查项目中的配置文件,并读取这个文件

module.exports = {

    entry: path.join(__dirname, "./src/main.js"),//入口文件

    output: {

        path: path.join(__dirname, "./dist"),//输出路径

        filename: "bundle.js"//执行输出文件的名称

    },

    plugins: [

        new htmlWebpackPlugin({

            template: path.join(__dirname, "./src/index.html"),//指定模版文件路径

            filename: "index.html"//设置内存中页面名称

        }),

        new VueLoaderPlugin(),

    ],

    module: { // 用来配置第三方loader模块的

        rules: [ // 文件的匹配规则

            //处理css文件的规则

            {test: /\.css$/, use: ['style-loader', 'css-loader']},

            {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},

            {test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']},

            //小于等于 limit 不进行base64编码

            {test: /\.(png|jpg|jpeg|bmp|gif)$/, use: 'url-loader?limit=43960&name=[hash:8]-[name].[ext]'},

            //处理字体文件的loader,bootstrap小图标就是使用这个

            {test: /\.(eot|svg|ttf|woff|woff2)$/, use: 'url-loader'},

            // 配置 babel-loader 来转换高级的ES语法

            {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},

            // 配置 vue-loader 来处理 .vue 文件

            { test: /\.vue$/, use: 'vue-loader' },

        ]

    },

    // resolve: {

    //     alias: { // 修改 Vue 被导入时候的包的路径

    //         "vue$": "vue/dist/vue.js"

    //     }

    // }

};

.babelrc

{

  "presets": ["env", "stage-0"],

  "plugins": ["transform-runtime"]

}

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

</body>

</html>

main.js

console.log("测试");

先执行npm i来安装依赖

执行npm run dev 控制台无错误,显示 '测试' 就可以了

2 布置基础模块

引入Mint UI 实现顶部固定栏

index.html的body标签中添加<div id="app"></div>

main.js内容改为

/*Vue*/

import Vue from 'vue'

/*Mint UI*/

import MintUI from 'mint-ui'

Vue.use(MintUI);

import 'mint-ui/lib/style.css'

/*App.vue*/

import app from './App.vue'

new Vue({

    el: "#app",

    render: c => c(app),

});

在src目录下创建App.vue 内容为

<template>

    <div class="app_container">

        <!--顶部-->

        <mt-header fixed title="固定在顶部"></mt-header>

        <!--中间 路由 router-view-->

        <!--底部-->

        <h1 id="aaa">我是主文件_App.vue</h1>

    </div>

</template>

<script></script>

<!--lang表示设置样式为 scss ,scoped表示此样式只能当前模版使用-->

<style lang="scss" scoped>

    .app_container

    {

        padding-top: 40px; //让固定在顶部与<h1>标签内容不重合

    }

</style>

执行npm run dev

引入MUI实现底部固定栏

  • 首先去GitHub下载MUI数据 https://github.com/dcloudio/mui/
  • 在src目录下创建目录lib ,把解压好的mui-master下的dist目录放到项目的lib包下,并改名为mui
  • 把解压好的mui-master下的examples的hello-mui下的css的icons-extra.css文件放入项目mui下的css中

  • 把解压好的mui-master下的examples的hello-mui下的fonts的mui-icons-extra.ttf文件放入项目mui下的fonts中

  • 在main.js中添加
/*MUI*/

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

import './lib/mui/css/icons-extra.css'
  • 在App.vue中的底部注释下面加
        <nav class="mui-bar mui-bar-tab">

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

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

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

            </a>

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

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

                <span class="mui-tab-label">会员</span>

            </a>

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

                <span class="mui-icon mui-icon-extra mui-icon-extra-cart">

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

                </span>

                <span class="mui-tab-label">购物车</span>

            </a>

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

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

                <span class="mui-tab-label">搜索</span>

            </a>

        </nav>
  • 执行npm run dev

引入vue-router

  • 把App.vue中的底部四个
  • a标签改为 router-link
  • href改为to
  • 四个to的内容依次为

一步步创建第一个Vue项目的更多相关文章

  1. Node.js npm基础安装配置&创建第一个VUE项目

    使用之前,我们先来明白这几个东西是用来干什么的. node.js: 一种javascript的运行环境,能够使得javascript脱离浏览器运行.Node.js的出现,使得前后端使用同一种语言,统一 ...

  2. VsCode创建第一个vue项目

    使用vue-cli快速构建项目  vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. 安装vue-cli之前,需要先安装了vue和webpack · node -v      ...

  3. 使用VSCode创建第一个VUE项目

    vue init webpack vue_test回车,然后输入工程名称vue_test vue:Missing space before value for key 'components' 原因是 ...

  4. 创建一个vue项目的过程

    创建一个vue项目: 1.首先从UI手上拿到PSD设计图,然后看设计搞的内容,需要做个大概的页面布局 2.做vue之前不许安装node,因为做vue项目要和node结合使用 3.然后安装vue脚手架: ...

  5. 开始创建一个 Vue 项目

    开始创建一个 Vue 项目 安装 nodejs 略 安装 npm 默认安装时自带了 npm 安装 cnpm 为了更快的下载组件,使用cnpm,cnpm 是淘宝前端的镜像. 使用 npm 安装 cnpm ...

  6. 利用 vue-cli 构建一个 Vue 项目

    一.项目初始构建 现在如果要构建一个 Vue 的项目,最方便的方式,莫过于使用官方的 vue-cli . 首先,咱们先来全局安装 vue-cli ,打开命令行工具,输入以下命令: $ npm inst ...

  7. 如何搭建一个VUE项目

    搭建环境 搭建node环境 下载 1.进入node.js官方网站下载页,点击下图中框出位置,进行下载即可,当前版本为8.9.4,下载网址为:https://nodejs.org/zh-cn/downl ...

  8. 构建一个Vue项目

    一 我们需要安装vue.js Vue.js官网 当我们已经安装了vue-cli,那么我们需要更新Vue-cli. vue-cli3.0使用及配置 二 安装好了之后: 我们可以直接使用命令:mkdir ...

  9. 一、vue：如何新建一个vue项目

    比较好用的一个脚手架:https://a1029563229.gitbooks.io/vue/content/cooking-cli.html 创建一个vue项目的流程: 1.安装node,版本号必须 ...

随机推荐

  1. 机器学习 - 案例 - 样本不均衡数据分析 - 信用卡诈骗 ( 标准化处理, 数据不均处理, 交叉验证, 评估, Recall值, 混淆矩阵, 阈值 )

    案例背景 银行评判用户的信用考量规避信用卡诈骗 ▒ 数据 数据共有 31 个特征, 为了安全起见数据已经向了模糊化处理无法读出真实信息目标 其中数据中的 class 特征标识为是否正常用户 (0 代表 ...

  2. 解决docker命令行终端显示不全的问题

    访问docker容器,vim编辑文件时总是无法展示文件内容 解决 sudo docker exec -it -e LINES=$(tput lines) -e COLUMNS=$(tput cols) ...

  3. 小D课堂 - 新版本微服务springcloud+Docker教程_3-04 SpringCloud微服务核心组件Eureka介绍和闭源后影响

    笔记 4.SpringCloud微服务核心组件Eureka介绍和闭源后影响     简介:         SpringCloud体系介绍             官方地址:http://projec ...

  4. linux简单命令9--yum安装软件

    +

  5. [GPU] Machine Learning on C++

    一.MPI为何物? 初步了解:MPI集群环境搭建 二.重新认识Spark 链接:https://www.zhihu.com/question/48743915/answer/115738668 马铁大 ...

  6. redis单机版无法启动java程序解决

    1.注释掉 bind 127.0.0.1 2.kill-9 杀死进行 3.redis-server + 配置文件进行重启,

  7. Java集合(7)：散列与散列码

    散列的价值在于速度.我们使用数组来保存键的信息,这个信息并不是键本身,而是通过键对象生成一个数字(散列码),作为数组下标.由于数组的容量是固定的,而散列容器的大小是可变的,所以不同的键可以产生相同的数 ...

  8. vue中 key 值的作用

    原文地址 我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面.而隐藏在背后的原理便是其高效的Diff算法. vue和react的虚拟DOM ...

  9. Python selenium自动化测试框架入门实战--登录测试案例

    本文为Python自动化测试框架基础入门篇,主要帮助会写基本selenium测试代码又没有规划的同仁.本文应用到POM模型.selenium.unittest框架.configparser配置文件.s ...

  10. SecureCRT设置 log file

    SecureCRT设置 log filelog file name:D:\1-SecureCRT-log\com-6\%S_%Y%M%D_%h.log on each line:[%Y%M%D_%h: ...