Vue项目 成员管理系统 Vue-CLI脚手架构建项目 (1)

一、环境搭建

使用vue-cli脚手架，脚手架中单独内置了webpack，不需要单独来装webpack再使用

1.1 全局安装 Vue-CLI

npm install -g @vue/cli //-g 指全局安装

1.2 安装成功后，可以查看版本

vue -V //大写的V

二、创建项目

2.1 用vue创建msm的项目

vue create msm

注意: 使用vue-cli脚手架创建项目的时候，不要着急按回车选择，有些内容需要配置

​

第一行 为之前创建项目保留的配置的版本(之前没创建过就没有第一行)

第二行与第三行 是默认的Vue2和Vue3版本

第四行 为自定义版本(这里选择自定义版本)

 选择Babel，Router以及CSS预处理器(空格为选择,回车为下一步)，其他为默认选择

询问要创建哪个版本，选择2.x的版本

询问是否使用历史路由，选择使用

 CSS处理器选择第一个就可以了

 EsLint选择最后一个就可以了

什么时间去检测选择Lint on save

选择创建独立的配置文件

 是否把项目的配置保存下来,选择是

保存作为msm

2.2 创建项目成功后,进入项目文件夹

cd msm

2.3 启动服务

npm run serve

 2.4 自定义配置成功加载的页面

 在 public\index.html 中，修改title内容，更改标题

<title>成员管理系统</title>

2.5 自动打包

在vue-cli脚手架中修改保存的时候会自动进行打包

"serve": "vue-cli-service serve",

基于webpack的服务,基于这个命令来的,在这个基础之上又封装一些东西,当我们去修改的时候,它会自动地去启动,自动地重新执行

webpack-dev-serve

现在以上这些就是把默认的脚手架搭起来了，把默认基本的内容跑起来了

三、初始化项目

3.1 在根目录(src/)下创建vue.config.js(配置文件)，进行配置

module.exports = {//输出出口,输出一个对象
    devServer: {//对devServer进行配置
        port: 8888,//端口改为8888
        host: 'localhost',
        https: false,//不使用https协议
        open: true,//自动打开浏览器
    },
    lintOnSave: false,//eslint-loader 是否在保存的时候检查
    productionSourceMap: false,//不生成.js.map的文件eslint-loader 是否在保存的时候检查
}

注意: 启动服务(npm run serve)虽然有热加载功能，即时时重新打包的功能，但是修改配置文件,需要把服务关掉，重新启动，才能读取新的配置文件

四、安装第三方插件

4.1 涉及到增删改查  安装第三方组件axios

npm i axios -S //-S 指安装到生产环境

4.2 涉及到组件间的通信 安装第三方组件pubsub-js

npm i pubsub-js -S

4.3 直接拿过来用的element-ui

npm i element-ui -S

在main.js中对element-ui进行配置(代码注释部分为main.js自带的内容)

//! 生成vue实例 相当于项目整个的入口
//import Vue from "vue";
//import App from "./App.vue";
//import router from "./router";
import ElementUi from 'element-ui';//引入element-ui 组件库
import 'element-ui/lib/theme-chalk/index.css';//引入element-ui必需的css文件 样式

//Vue.config.productionTip = false;
Vue.use(ElementUi);//使用element-ui 引入之后use才算启用了

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

在vscode中安装Element UI Snippets插件，以获得element-ui中的语法提示