写在了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.htmlbody标签中添加<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下的exampleshello-mui下的cssicons-extra.css文件放入项目mui下的css

  • 把解压好的mui-master下的exampleshello-mui下的fontsmui-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. Pycharm 编辑器快捷键

    必备技能:IDEA一定要懂的32条快捷键 这些IntelliJ IDEA键盘快捷键可以让你专注于编写代码,让你的双手在键盘上起舞. 1,搜索文件名: ↑   Shift 快速连续按两下 2,显示便捷提 ...

  2. Pytorch-拼接与拆分

    引言 本篇介绍tensor的拼接与拆分. 拼接与拆分 cat stack split chunk cat numpy中使用concat,在pytorch中使用更加简写的 cat 完成一个拼接 两个向量 ...

  3. XLSX.js 导出Excel demo

    GitHub:https://github.com/SheetJS/js-xlsx 一个js操作Excel的工具,如下代码,很方便的就将json数据导出为Excel文件. 使用示例: //json 数 ...

  4. python基础知识(函数2)

    返回值 return return[value]  多个值用,逗号分开,没有返回值,会返回none值,函数不给指定返回值也会返回none值 def functionname(p1,p2,p3): re ...

  5. 《精通并发与Netty》学习笔记(05 - Google Protobuf与Netty的结合)

    protobuf是由Google开发的一套对数据结构进行序列化的方法,可用做通信协议,数据存储格式,等等.其特点是不限语言.不限平台.扩展性强 Netty也提供了对Protobuf的天然支持,我们今天 ...

  6. 【VS开发】uafxcwd.lib(afxmem.obj) : error LNK2005: 已经在 LIBCMTD.lib(new.obj) 中定义错误解决方案

    如果在编译MFC程序的时候出现下列及类似的错误: 1>uafxcwd.lib(afxmem.obj) : error LNK2005: "void * __cdecl operator ...

  7. PHP学习(3)——数据的存储与检索

    要点目录: I.保存数据 II.打开文件   III.创建并写入文件 IV.关闭文件 V.读文件 VI.给文件加锁 VII.删除文件 VIII.其他有用的文件操作函数 IX.数据库管理系统 1.保存数 ...

  8. Textual Entailment(自然语言推理-文本蕴含) - AllenNLP

    自然语言推理是NLP高级别的任务之一,不过自然语言推理包含的内容比较多,机器阅读,问答系统和对话等本质上都属于自然语言推理.最近在看AllenNLP包的时候,里面有个模块:文本蕴含任务(text en ...

  9. Opencv 简单视频播放器

    // C++ header and namespace #include <iostream> #include <string> #include <cstdlib&g ...

  10. Design HashMap

    Design a HashMap without using any built-in hash table libraries. To be specific, your design should ...