Vue-- project initialization

Preparing the Environment

We learned a lot in front vue relevant knowledge, learn more independent now to develop a simple system, using vue family bucket and learn things elementUI to string together before.

We scaffolding to create a project based on Vue-CLI, you need to install Node.js8.9 +

Installation Vue-CLI

npm install -g @vue/cli

After successful installation, you can use the command line command vue, such as viewing version

# Uppercase V 
VUE -V

If after performing the above, the command line prompt 'vue' not an internal or external command

Solution: Configure environment variables

1. Review the installation directory of global nmp root -g

2. My computer into a global installation directory, find vue.cmd

3. Right Computer, Properties -> Advanced System Settings - "environment variable, vue.cmd path environment variable to join, click" OK "

Vue CLI to create a project

Project called zz-mms

Choose a custom installation, when the Vue-CLI study, said that the meaning of each option, not here in the description

Wait for project installation is complete, start the test project

cd zz-mms
npm run serve

See the following page is successful

Change the title and icon

Project started, but we are heading our project name and icon are vue official icon below.

Open the project's public file folder, inside the index.html file, the contents of the title tag to "Zou Zou management systems," Internet to find icon, replace the favicon.ico, refresh the page, as follows

Initialize the project

The default port is 8080, we can also change the port inspection format is a very troublesome thing, we have to shut down, which can be configured in vue.config.js inside.

Vue.config.js create a file in the root directory zz-mms, write the following configuration

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-ssm\src\main.js 中导入 element-ui 和 element-ui/lib/theme-chalk/index.css ，

使用 Vue.use(ElementUI)

在 zz-ssm\src\main.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 语法提示，还有其他的插件也可以安装，方便我们写代码