Vue通过vue-cli3.0图形化Vue-ui创建项目到优化部署项目

简介

vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。工具就是为了让开发者能够开箱即用快速地进行应用开发而开发的，可以通过vue create命令行的方式创建vue项目，也可以使用vue ui图形化的方式创建vue项目。本篇文章主要讲解使用vue ui图形化方式来创建vue项目。

优点

不需要使用繁琐的命令行来操作；
直观高效的安装插件和依赖；
对打包后的项目直观查看资源文件和分析项目。

案例地址:https://github.com/pengjunshan/WebPJS

其它Web文章
CSS浮动的使用和解决浮动的五种方法
CSS定位relative、absolute、fixed使用总结
原生开发WebApi知识点总结
开发中常用jQuery知识点总结
C3动画+H5知识点使用总结
Flex布局知识点总结
ES6常用知识总结
Vue学习知识总结
开发环境到生产环境配置webpack
待续......

前提

Node.js版本

Node.js版本必须是8.9 或更高版本,通过node -v命令行查看本地node的版本,如版本小于8.9只需更新node版本即可。

vue-cli版本

vue-cli版本必须是3.0或更高版本，通过vue -V命令行查看本地vue-cli的版本，如果版本小于3.0需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它，然后在通过npm install -g @vue/cli 或 yarn global add @vue/cli再安装它。

创建项目

1.使用vue ui命令行启动可视化程序

2.打开可视化界面

复制生成的http://localhost:8000地址到浏览器中打开，如果不是第一次使用，会默认上一次使用的项目。

3.创建新项目

首先点击左上角项目倒三角，弹窗底部有个Vue项目管理器，点击它进入创建项目页面。

4.选择创建项目目录

首先点击创建按钮，然后选择创建项目的地址，点击下方在此创建新项目。

5.创建项目名称

填写项目文件夹，包管理器一般默认就行。

6.选择预设

建议选择手动

7.选择安装的插件

Babel是默认必选的，跳转肯定需要Router，所以Router也选上，ESLint用来规范代码的，选中“使用配置文件”可以将插件的配置保存在各自的配置文件中。这里根据自身项目需要来选择插件是否安装，比如Vuex需要就选中不需要就不选。

8.配置

一般需要选中把router设置为history,因为后端也要处理；选择ESLint的模式，选中ESLint-Standard标准模式；然后选择save保存的时候校验。然后点击下方创建项目按钮。

9.开始创建项目

个人认为小白不建议保存预设，多操作几次不是更加有印象吗

10.项目创建完成仪盘表

等项目创建完成后自动切换到当前项目

11.安装插件以Element-ui（PC端UI库）为例

点击左侧菜单的插件按钮，可以查看项目中所用到的所有插件
点击上图右上角的安装插件进入查找插件页面，输入框内输入要安装的插件名称，选中你要安装的插件后点击右下方的安装按钮进行安装插件。
插件安装完成后点击Fully import选择框，选择Import on demand按需导入。然后点击完成安装。

12.安装项目依赖以Axios（Vue官方推荐的网络请求）为例

点击左侧依赖菜单，进入项目依赖页。可以看到所有的运行依赖和开发依赖。每个依赖项后都有个删除按钮，可以手动点击删除当前依赖。
点击上图右上角安装依赖按钮进入搜索页面，输入项目需要的依赖然后选中后点击下方安装按钮。

13.配置项

这里可以配置一些基础设置和CSS的一些设置

14.任务 serve

serve 开发环境，点击运行按钮，等项目编译完后点击启动app按钮后自动开发项目。

15.vue-cli3.0项目目录

和2.0版本相比少了很多配置

16.任务 build

我们点击build的运行按钮，进行打包项目，打包完成后往下滑可以查看资源和依赖库文件的大小，还会在项目目录中生成一个dist文件夹就是打包后的成果。

优化项目

1.添加进度条

给项目添加进度条效果，先打开项目控制台，打开依赖，安装nprogress，打开main.js，编写如下代码

//导入进度条插件
import NProgress from 'nprogress'
//导入进度条样式
import 'nprogress/nprogress.css'
.....
//请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config => {
  //当进入request拦截器，表示发送了请求，我们就开启进度条
  NProgress.start()
  //为请求头对象，添加token验证的Authorization字段
  config.headers.Authorization = window.sessionStorage.getItem("token")
  //必须返回config
  return config
})
//在response拦截器中，隐藏进度条
axios.interceptors.response.use(config =>{
  //当进入response拦截器，表示请求已经结束，我们就结束进度条
  NProgress.done()
  return config
})

2.build阶段移除所有的console信息

安装一个插件（babel-plugin-transform-remove-console）在项目build阶段移除所有的console信息，打开项目控制台，点击依赖->开发依赖，输入babel-plugin-transform-remove-console，安装插件。打开babel.config.js，编辑代码如下：

//项目发布阶段需要用到的babel插件
const productPlugins = []

//判断是开发还是发布阶段
if(process.env.NODE_ENV === 'production'){
  //发布阶段
  productPlugins.push("transform-remove-console")
}

module.exports = {
  "presets": [
    "@vue/app"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    ...productPlugins
  ]
}

3.修改webpack的默认配置

默认情况下，vue-cli 3.0生成的项目，隐藏了webpack配置项，如果我们需要配置webpack，需要通过vue.config.js来配置。在项目根目录中创建vue.config.js文件

module.exports = {
    chainWebpack:config=>{
        //发布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默认的打包入口，调用clear则是删除默认的打包入口
            //add添加新的打包入口
            config.entry('app').clear().add('./src/main-prod.js')
        })
        //开发模式
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

4.加载外部CDN

默认情况下，依赖项的所有第三方包都会被打包到js/chunk-vendors.js文件中，导致该js文件过大;

可以在vue.config.js中通过externals排除这些包，使它们不被打包到js/chunk-vendors.js文件中

module.exports = {
    chainWebpack:config=>{
        //发布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默认的打包入口，调用clear则是删除默认的打包入口
            //add添加新的打包入口
            config.entry('app').clear().add('./src/main-prod.js')

            //使用externals设置排除项
            config.set('externals',{
                vue:'Vue',
                'vue-router':'VueRouter',
                axios:'axios',
                'element-ui': 'ElementUI',
                echarts:'echarts'
                ...根据自己项目中用到的库
            })
        })
        //开发模式
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

设置好排除之后，为了使我们可以使用vue，axios等内容，我们需要加载外部CDN的形式解决引入依赖项。打开开发入口文件main-prod.js,删除掉默认的引入代码

5.定制首页内容

开发环境的首页和发布环境的首页展示内容的形式有所不同;我们可以通过插件的方式来定制首页内容，打开vue.config.js，编写代码如下：

module.exports = {
    chainWebpack:config=>{
        config.when(process.env.NODE_ENV === 'production',config=>{
            ......
            
            //使用插件
            config.plugin('html').tap(args=>{
                //添加参数isProd
                args[0].isProd = true
                return args
            })
        })

        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')

            //使用插件
            config.plugin('html').tap(args=>{
                //添加参数isProd
                args[0].isProd = false
                return args
            })
        })
    }
}

然后在public/index.html中使用插件判断是否为发布环境并定制首页内容;



 
   
   
   
   
   <%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统

 
 .......

6.路由懒加载

当路由被访问时才加载对应的路由文件，就是路由懒加载。

1.安装 @babel/plugin-syntax-dynamic-import

打开vue控制台，点击依赖->安装依赖->开发依赖->搜索@babel/plugin-syntax-dynamic-import点击安装。

2.在babel.config.js中声明该插件，打开babel.config.js

//项目发布阶段需要用到的babel插件
const productPlugins = []

//判断是开发还是发布阶段
if(process.env.NODE_ENV === 'production'){
  //发布阶段
  productPlugins.push("transform-remove-console")
}

module.exports = {
  "presets": [
    "@vue/app"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    ...productPlugins,
    //配置路由懒加载插件
    "@babel/plugin-syntax-dynamic-import"
  ]
}

3.将路由更改为按需加载的形式，打开router.js，更改引入组件代码如下：

import Vue from 'vue'
import Router from 'vue-router'
const Login = () => import(/* webpackChunkName:"login_home_welcome" */ './components/Login.vue')
// import Login from './components/Login.vue'
const Home = () => import(/* webpackChunkName:"login_home_welcome" */ './components/Home.vue')
// import Home from './components/Home.vue'
......

7.项目上线

通过node创建服务器,首先创建一个文件夹server(名字随便起)来存放node服务器，使用终端打开server文件夹，输入命令 npm init -y初始化包之后，输入命令 npm i express -S安装Express，然后打开我们项目目录，复制dist文件夹，粘贴到server文件夹中，在server文件夹中创建app.js文件,编写代码如下：

const express = require('express')
const app = express()
app.use(express.static('./dist'))
app.listen(8998,()=>{
    console.log("server running at http://127.0.0.1:8998")
})

然后再次在终端中输入 node app.js 然后在浏览器输入你的电脑的ip加端口就可以打开了。

8.使用pm2管理应用

当在本地通过命令行启动服务后，关闭命令窗口后服务就会自动关闭掉，是不是很气人！通过pm2就会避免这种情况；

1.打开server文件夹的终端，输入命令：npm i pm2 -g，安装pm2;
2.使用pm2启动项目，在终端中输入命令：pm2 start app.js --name 自定义名称,开启服务；
3.查看项目列表命令：pm2 ls；
4.重启项目：pm2 restart 自定义名称；
5.停止项目：pm2 stop 自定义名称；
+6.删除项目：pm2 delete 自定义名称；