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中使用插件判断是否为发布环境并定制首页内容;

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
   <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>

 </head>
 .......
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 自定义名称;