VUE教程10 vue-cli

什么是Vue-CLI

Vue-CLI（Command Line Interface） 是vue官方提供的脚手架工具,默认已经帮我们搭建好了一套利用webpack管理vue的项目结构

安装Vue-cli

安装脚手架工具: npm install -g @vue/cli
检查是否安装成功: vue --version

C:\D\works\vue\Vue核心基础>vue -V
You are using Node v13.10.1.
Node.js 13.x has already reached end-of-life and will not be supported in future major releases.
It's strongly recommended to use an active LTS version instead.
@vue/cli 4.5.12

创建、打包、运行项目

通过脚手架创建项目:

vue create testzxm

通过Vue-CLI生成的项目结构解读
3.1在Vue-CLI2.x中生成的项目结构中我们能够看到build文件夹和config文件夹
这两个文件夹中存储了webpack相关的配置, 我们可以针对项目需求修改webpack配置
3.2在Vue-CLI3以后生成的项目结构中已经没有了build文件夹和config文件夹
这么做的目的是为了化繁为简, 让初学者不用关心webpack, 只用关心如何使用Vue

node_modules文件夹: 存储了依赖的相关的包
public文件夹: 任何放置在 public 文件夹的静态资源都会被简单的复制，
              而不经过 webpack。你需要通过绝对路径来引用它们
              一般用于存储一些永远不会改变的静态资源或者webpack不支持的第三方库
src文件夹: 代码文件夹
 |----assets文件夹: 存储项目中自己的一些静态文件(图片/字体等)
 |----components文件夹: 存储项目中的自定义组件(小组件,公共组件)
 |----views文件夹: 存储项目中的自定义组件(大组件,页面级组件,路由级别组件)
 |----router文件夹: 存储VueRouter相关文件
 |----store文件夹: 存储Vuex相关文件
 |----App.vue:根组件
 |----main.js:入口js文件

启动项目

cd testzxm
npm run serve

启动后提示访问地址，通过浏览器可以对项目进行访问

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.124.6:8080/

打包项目

cd testzxm
npm run build

打包完成后 项目被打包到dist文件夹下，如下

Vue-cli修改webpack配置

Vue-CLI为了方便起见对webpack原有的属性进行了一层封装, 如果我们需要修改webpack的配置
那么我们可以在项目中新建一个vue.config.js的文件, 然后去查询Vue-CLI的封装是否能够满足我们的需求
如果可以满足我们的需求, 那么就使用Vue-CLI封装的属性来修改webpack的配置
如果不可以满足我们的需求, 那么我们可以通过configureWebpack的属性来编写原生的webpack配置
内容示例如下：

  const path = require('path');
const webpack = require('webpack');
module.exports = {
  // output: {
  //   path: path.resolve(__dirname, 'bundle')
  // }
  outputDir: 'bundle',//vue-cli 封装后的配置属性 直接配置
  configureWebpack: {
    // 就可以在这个对象中编写原生的webpack配置
    plugins: [
      new webpack.BannerPlugin({//vue-cli 未封装的webpack原生配置属性 在这里配置
        banner: '知播渔教育-www.it666.com'
      })
    ]
  }
}