Vue--项目初始化

环境准备

在前面我们学了很多vue相关的知识，学的比较独立，现在来开发一个简单的系统，使用vue全家桶和elementUI把之前学的东西都串起来。

我们基于Vue-CLI脚手架创建项目，需要安装Node.js8.9+

安装Vue-CLI

npm install -g @vue/cli

安装成功后，在命令行可以使用  vue 命令, 比如 查看版本

# 大写V
vue -V

如果执行上面后，命令行提示 'vue' 不是内部或外部命令

解决方法：配置环境变量

1. 查看全局安装目录 nmp root -g

2.在 我的电脑 进入全局安装目录下，找到 vue.cmd

3. 右键计算机，属性—》高级系统设置—》环境变量，将 vue.cmd 的路径加入环境变量，点击“确定”

Vue CLI 创建项目

项目名为zz-mms

 选择自定义安装，在Vue-CLI学习的时候，说过每个选项的含义，这里就不在说明

 

 等待项目安装完成，启动项目测试

cd zz-mms
npm run serve

看到如下页面则成功

更改标题和图标

项目启动了，但是我们的标题是我们的项目名和图标是vue的官方图标，如下。

 打开项目的public文件夹，里面的index.html文件，将title标签里的内容改为“邹邹管理系统”，网上找个icon，把favicon.ico替换，刷新网页，如下

初始化项目

默认的端口是8080，我们也可以更改端口，格式检查也是一件很麻烦的事情，我们要关闭，这些都可以在vue.config.js里面进行配置。

在zz-mms根目录下创建一个vue.config.js文件，写入如下配置

module.exports = {
    devServer: {
        port: 8888, // 端口号，如果端口被占用，会自动加1
        host: "localhost",  // 主机名，127.0.0.1  真机 0.0.0.0
        https: false,  // 协议
        open: true,  // 启动服务时自动打开浏览器访问

    },
    lintOnSave: false,  // 关闭格式检查
    productionSourceMap: false // 打包时不会生成.map文件，加快打包速度
}

安装axios，处理异步请求，在项目根目录下进行安装

npm i -S axios

安装  pubsub-js ，实现非父子组件间通信

npm i -S pubsub-js

安装完之后查看 package.json 中是否有对应依赖

安装element-ui 

Element 是饿了么平台推出的一套基于 Vue.js 开发的后台页面组件库。可以帮助我们快速的搭建一个基于elementui的网站

官网：https://element.eleme.cn/

可以通过cdn引用，不推荐

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

将  element-ui 模块通过本地安装为生产依赖。在  zz-ssm 目录下的命令行窗口，输入以下命令：

npm i element-ui -S

安装完之后再package.json文件查看是否安装成功。

引用element-ui

上面我们已经安装好了element-ui，现在来整合到我们的项目zz-mms中

在 zz-ssmsrcmain.js 中导入 element-ui 和 element-ui/lib/theme-chalk/index.css ，

使用 Vue.use(ElementUI)

在 zz-ssmsrcmain.js按下面内容修改

import Vue from "vue";
import ElementUI from 'element-ui' // 引用element-ui组件库
import 'element-ui/lib/theme-chalk/index.css'; // 引用样式
import App from "./App.vue";
import router from "./router";

// 使用element-ui
Vue.use(ElementUI);

// 环境配置，是否为生成环境
// false为开发环境，Vue会提供很多警告，方便调试代码
// true为生成环境，Vue会提供很少的警告
Vue.config.productionTip = process.env.NODE_ENV === 'production'

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

启动看是否配置成功，在zz-mms下执行下面命令，启动项目

npm run serve

没有报错，自动打开了网页则项目配置成功

如果你是在 VS Code 写代码，建议安装  Element UI Snippets 插件，有 element 语法提示，还有其他的插件也可以安装，方便我们写代码