Vue-CLI详解-摩杜云开发者社区

前言

如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI;如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作，那无以效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。用vue.js开发大型应用需要使用webpack打包工具。

Vue CLI

CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架
Vue CLI是一个官方发布 vue.js 项目脚手架
使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置.

Vue CLI的安装

来自官网：vue-cli

关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

Node 版本要求 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

可以使用下列任一命令安装这个新的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确：

vue --version

E:\webpack\webpacktestvue>vue --version
@vue/cli 4.0.5

注意：上面安装的是Vue CLI3的版本，如果需要想按照Vue CLI2的方式初始化项目时不可以的。

拉取 2.x 模板 (旧版本) Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

Vue CLI2初始化项目vue init webpack my-project Vue CLI3初始化项目vue create my-project

Vue CLI2

E:\webpack\vue-cli2-test>vue init webpack vue-cli2-test 
# 会根据vue-cli2-test名称创建一个文件夹,存放之后的项目内容,该名称也会作为默认的项目名称,但是不能包含大写字母
? Project name vue-cli2-test
# 项目名称,不能包含大写
? Project description A Vue.js project
#项目描述
? Author zysheep <zysheep@126.com>
# 作者的信息,默认在git中读取信息
? Vue build runtime
# 选择第二个
? Install vue-router? No
# 是否需要路由
? Use ESLint to lint your code? No
# ESlint检测代码规范
? Set up unit tests No
# 单元测试
? Setup e2e tests with Nightwatch? No
#e2e测试
? Should we run `npm install` for you after the project has been created? (recommended) npm
# 选择npm安装
   vue-cli · Generated "vue-cli2-test".

1、Project name :项目名称，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了vueclitest。
2、Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
3、Author：作者，如果你有配置git的作者，他会读取。
4、Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y
5、Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们选择yes。
6、setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
7、Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n。
8、问你是否直接 npm install 安装插件（以前版本的是没有这一项的，需要自己手动install）

目录结构详解

webpack重要文件的讲解

package.json

{
    .....
    //定义了你可以用npm run [name]运行的命令
     "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "lint": "eslint --ext .js,.vue src",
        "build": "node build/build.js"
      },
      //项目运行时所依赖的模块
      "dependencies":{
          ...
      }
      //项目开发时所依赖的模块
      "devDependencies": {
         ...
      }
      // 声明项目需要的node或npm版本范围
      "engines": {
        "node": ">= 6.0.0",
        "npm": ">= 3.0.0"
      },
      //对浏览器的要求
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
      ]
 }

vue-cli中webpack的相关配置其实重要的是 build文件夹和 config文件夹，config文件夹中的内容更像是将一些变量单独列出来的文件夹，特别是他下面的index.js,本来config文件夹下的文件可以和webpack.base.config.js放在一起的，但是为了更加的清晰，所以就分开了。

build / build.js

构建生产版本，或者说是打生产的包，我们可以看根目录的package.json 中npm run build 运行的就是

node build/build.js

运行的就是build.js

'use strict'
//调用检测版本的文件，因为使用node和npm版本需要求的，因为check-versions.js是exports出一个函数，所以可以直接（）调用
require('./check-versions')()

//全局环境变量的设置  因为bundle.js是打的生成包,所以参数是production
process.env.NODE_ENV = 'production'
// loading 插件，可以在npm run build时看到loading
const ora = require('ora')
//删除命令，每次打包前会将上次打包的文件删除
const rm = require('rimraf')
//node.js中自带的文件路径工具
const path = require('path')
//在命令行中输出带颜色的文字
const chalk = require('chalk')

const webpack = require('webpack')
//引入../config/index.js，也就是项目中的一些配置变量，只引入文件夹，是因为会自动去该文件夹下找index.js
const config = require('../config')
//引入生产包的配置
const webpackConfig = require('./webpack.prod.conf')

//日志输出插件，会在命令行中显示loading效果，并输出提示
const spinner = ora('building for production...')
spinner.start()

// 删除上次编译生成过的文件（递归删除）
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  if (err) throw err
  //在删除完成的回调函数中开始编译    因为基本的webpack是有‘webpack’这个命令的，会自动去找根目录下的webpck.config.js,而我们不是用的webpck.config.js，使用的是webpack的回调函数打包
  webpack(webpackConfig, (err, stats) => {
     // 在编译完成的回调函数中,在终端输出编译的文件
    process.stdout.write(stats.toString({
        ...
    }）
    ...
  })
})

build / utils.js

utils.js包含了三(四)个工具函数：

生成静态资源的路径(根据开发环境还是正式环境配置不同的路径)
css-loader配置，生成 ExtractTextPlugin对象(生成独立的css文件)或loader字符串
生成 style-loader的配置
Node.js发送跨平台原生通知（新版的有，老的没有）

const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')

exports.assetsPath = function (_path) {
}

exports.cssLoaders = function (options) {
}


exports.styleLoaders = function (options) {
}

exports.createNotifierCallback = () => {
}

build / webpack.base.conf.js

这个文件是开发环境和生产环境，甚至测试环境，这些环境的公共webpack配置。可以说，这个文件相当重要。

// node自带的文件路径工具
var path = require('path')
// 工具函数集合
var utils = require('./utils')
  // 引用配置文件，config文件夹下的index.js
var config = require('../config')
  // 工具函数集合
var vueLoaderConfig = require('./vue-loader.conf')

//这个函数是说目录回退到该文件绝对路径的上一级，也就是根目录下
function resolve(dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    // 编译输出的静态资源根路径，可以在config文件夹下的index.js下build函数中看到，会生成dist文件夹
    path: config.build.assetsRoot,
    // 编译输出的文件名
    filename: '[name].js',
    // 正式发布环境下编译输出的上线路径的根路径
    publicPath: process.env.NODE_ENV === 'production' ?
      config.build.assetsPublicPath : config.dev.assetsPublicPath
  },

  //关于我们在代码中require或者import文件的相关配置
  resolve: {
    //可以省略后缀的文件（可以自动补全后缀名）
    extensions: ['.js', '.vue', '.json'],
    //提供一些别名，例如在router.js中的引入
    alias: {
      // 例如 import Vue from 'vue'，会自动到 'vue/dist/vue.common.js'中寻找
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [{
        // 审查 js 和 vue 文件
        // https://github.com/MoOx/eslint-loader
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        // 表示预先处理
        enforce: "pre",
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        // 处理 vue文件
        // https://github.com/vuejs/vue-loader
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        // 编译 js
        // https://github.com/babel/babel-loader
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        // 处理图片文件
        // https://github.com/webpack-contrib/url-loader
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        // 处理字体文件
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
}

build / webpack.dev.conf.js

该文件是开发环境中webpack的配置入口。

'use strict'
//工具方法
const utils = require('./utils')
const webpack = require('webpack')
//引入../config/index.js
const config = require('../config')
//合并配置文件，用来和webpack.base.config.js合并
const merge = require('webpack-merge')
const path = require('path')

const baseWebpackConfig = require('./webpack.base.conf')
//复制Webpack插件，将单个文件或整个目录复制到构建目录
const CopyWebpackPlugin = require('copy-webpack-plugin')
  // 自动生成 html 并且注入到 .html 文件中的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
 // webpack错误信息提示插件
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
// 一个简单的工具，查找当前机器上的开放端口
const portfinder = require('portfinder')

//设置开发环境的的ip地址和端口
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

//dev的设置，将webpack-base.config和下面的合并
const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
      // //对独立的css或者less，scss文件进行编译
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },

  // dev环境使用cheap-module-eval-source-map代码调试用的
  devtool: config.dev.devtool,

  // 使用webpack-dev-server    相关配置在 ../config/index.js
  devServer: {
  },

  plugins: [
    //config.dev.env展示的是"development"，我们可以根据这个字段做一些操作,例如dev环境资源的配置  
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),

    //使用热加载插件
    new webpack.HotModuleReplacementPlugin(),

    //当开启 HMR 的时候使用该插件会显示模块的相对路径，建议用于开发环境
    new webpack.NamedModulesPlugin(), 

    //则启用此插件后，编译时发生错误，webpack进程将不会退出并显示错误代码
    new webpack.NoEmitOnErrorsPlugin(),

    //html插件
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),

    // 将单个文件或整个目录复制到构建目录
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
})

//将dev环境的config输出
module.exports = new Promise((resolve, reject) => {
})

build / webpack.prod.conf.js

const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')

//引入../config/index.js
const config = require('../config')

//文件的合并，可以继承webpack.base.config.js
const merge = require('webpack-merge')

//引入webpack.base.conf.js
const baseWebpackConfig = require('./webpack.base.conf')

//复制Webpack插件，将单个文件或整个目录复制到构建目录
const CopyWebpackPlugin = require('copy-webpack-plugin')

//html插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

// webpack提供的插件，将css提取出来生成单独文件
const ExtractTextPlugin = require('extract-text-webpack-plugin')

//压缩css
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

//压缩js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

//将env 设置为production
const env = require('../config/prod.env')

const webpackConfig = merge(baseWebpackConfig, {
  module: {
    //使用styleLoader
    rules: utils.styleLoaders({
      //使用开发工具sourceMap，因为引入../config/index.js，该文件中 build下的productionSourceMap: true,
      sourceMap: config.build.productionSourceMap,
      extract: true,
      usePostCSS: true
    })
  },
  // 生产环境中的#sourceMap开启
  devtool: config.build.productionSourceMap ? config.build.devtool : false,

  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },

  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    //定义环境变量   这里是生产的环境变量，所以生产的文件都会以生产的路径为前缀
    new webpack.DefinePlugin({
      'process.env': env
    }),

    //压缩js
    new UglifyJsPlugin({
      ...
    }),

    //分离css到单独的文件
    new ExtractTextPlugin({
     ...
    }),

    //压缩提取出的css，并解决ExtractTextPlugin分离出的js重复问题(多个文件引入同一css文件)
    new OptimizeCSSPlugin({
      ...
    }),

    // html插件
    new HtmlWebpackPlugin({
     ...
    }),

    //这个插件将使得哈希基于模块的相对路径，生成一个四个字符的字符串作为模块ID,这里使用是为了当供应商模块不变时ID不变
    new webpack.HashedModuleIdsPlugin(),

    //此插件仅适用于由webpack直接处理的ES6模块。使得各个模块起到串联的作用，浏览器可以更快的解析
    new webpack.optimize.ModuleConcatenationPlugin(),

    // 将通用模块与捆绑分离，可以将最终的分块文件初始化一次，然后将其存储在缓存中供以后使用。
    //这会导致页速率优化，因为浏览器可以快速提供缓存中的共享代码，而不必在访问新页面时强制加载更大的包。
    new webpack.optimize.CommonsChunkPlugin({
     ...
    }),


   //复制Webpack插件，将单个文件或整个目录复制到构建目录
    new CopyWebpackPlugin([
      ...
    ])
  ]
})

//开启 gzip 的情况时，给 webpack plugins添加 compression-webpack-plugin 插件
if (config.build.productionGzip) {
 ...
}

//开启包分析的情况时， 给 webpack plugins添加 webpack-bundle-analyzer 插件
if (config.build.bundleAnalyzerReport) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = webpackConfig

config / dev.env.js

其实就是输出开发环境变量

    module.exports = merge(prodEnv, {
      NODE_ENV: '"development"'
    })

config / pro.env.js

输出正式环境变量

    module.exports = {
      NODE_ENV: '"production"'
    }

config / index.js

就是一些开发或者正式环境的配置

var path = require('path')

module.exports = {

  // production 生产环境
  build: {
    // 构建环境
    env: require('./prod.env'),
    // 构建输出的index.html文件
    index: path.resolve(__dirname, '../dist/index.html'),
    // 构建输出的静态资源路径
    assetsRoot: path.resolve(__dirname, '../dist'),
    // 构建输出的二级目录
    assetsSubDirectory: 'static',
    // 构建发布的根目录，可配置为资源服务器域名或 CDN 域名
    assetsPublicPath: '/',
    // 是否开启 cssSourceMap
    productionSourceMap: true,
    // 默认关闭 gzip，因为很多流行的静态资源主机，例如 Surge、Netlify，已经为所有静态资源开启gzip
    productionGzip: false,
    // 需要使用 gzip 压缩的文件扩展名
    productionGzipExtensions: ['js', 'css'],   
    // 运行“build”命令行时，加上一个参数，可以在构建完成后参看包分析报告
    // true为开启，false为关闭
    bundleAnalyzerReport: process.env.npm_config_report
  },

  // dev 开发环境
  dev: {
    // 构建环境
    env: require('./dev.env'),
    // 端口号
    port: 3333,
    // 是否自动打开浏览器
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    // 编译发布的根目录，可配置为资源服务器域名或 CDN 域名
    assetsPublicPath: '/',
    // proxyTable 代理的接口（可跨域）
    // 使用方法：https://vuejs-templates.github.io/webpack/proxy.html
    proxyTable: {},
    // 默认情况下，关闭 CSS Sourcemaps，因为使用相对路径会报错。
    // CSS-Loader README：https://github.com/webpack/css-loader#sourcemaps
    cssSourceMap: false
  }
}

Runtime-Compiler和Runtime-only的区别

总结如果在之后的开发中，你依然使用template，就需要选择Runtime-Compiler 如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only

render和template

Runtime-Compiler 和 Runtime-only

为什么存在这样的差异呢？

我们需要先理解Vue应用程序是如何运行起来的。
Vue中的模板如何最终渲染成真实DOM。

Vue程序运行过程

render函数的使用

new Vue({
  el: '#app',

  render: (createElement) => {
    //使用方式一
    //return createElement('标签','相关数据对象(可以不传递)',['内容数组'])
    //1.1 render函数基本使用
    //return createElement('div',{class:'box'},['三月三'])
    //1.2 嵌套render函数
   //return createElement('div',{class:'box'},['三月三',createElement('h2',['标题'])]);
   //使用方式二  传递一个组件对象
    return  createElement(App)
  }
})

Vue CLI3

vue-cli 3 与 2 版本有很大区别

vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录
vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化
移除了static文件夹，新增了public文件夹，并且index.html移动到public中

创建vue-cli3

E:\webpack>vue create vue-cli3-test

Vue CLI v4.4.4
? Please pick a preset: Manually select features  
# 选择配置方式,这里我选择手动配置
? Check the features needed for your project: Babel 
# 选择自己需要的配置空格选中或反选
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
# 对应的配置单独生成文件还是放在package.json中
? Save this as a preset for future projects? No
# 要不要把刚才自己选择的配置保存下来

Manually select fewtures/选择手动配置

Babel（默认）：使用 Babel 可以将最新的 JavaScript 语法转换为浏览器兼容的旧版本语法，以确保在各种浏览器上的兼容性。
TypeScript：TypeScript 是一种类型检查的 JavaScript 超集，它可以帮助你在开发过程中捕获潜在的错误，并提供更好的代码智能感知和文档化。
Progressive Web App (PWA) Support选择此选项可以启用 Progressive Web App（渐进式 Web 应用）支持，这使你的应用可以像原生应用一样具有离线访问、推送通知等功能。
Router：Vue Router 是 Vue.js 的官方路由管理器，它允许你在应用中实现页面之间的导航和路由。
Vuex：Vuex 是 Vue.js 的官方状态管理库，用于在大型应用程序中管理应用的状态和数据。
CSS Pre-processors：选择此选项可以启用使用 CSS 预处理器，如 Sass、Less 或 Stylus，来扩展和改进 CSS 的编写体验。
Linter / Formatter：选择此选项可以启用代码风格检查和格式化工具，如 ESLint 和 Prettier，以帮助你在开发过程中保持一致的代码风格和更好的代码质量。
Unit Testing：选择此选项可以启用单元测试框架，如 Jest 或 Mocha，用于编写和运行针对代码单元的测试。
E2E Testing：选择此选项可以启用端到端（End-to-End）测试框架，如 Cypress 或 Nightwatch，用于模拟和测试应用的完整流程和用户交互。

npm run serve尝试运行

作用

启动开发服务器：它会创建一个本地开发服务器，监听指定的端口（默认为 8080），并提供了一个 Web 界面用于实时预览你的应用程序。
实时构建和热重载：在开发模式下，当你进行代码修改时，Vue CLI 会实时重新构建你的应用程序，并通过热重载将更新后的内容实时显示在浏览器中，无需手动刷新页面。
错误检测和警告提示：开发服务器会监听你的代码变动并进行实时检测，如果存在错误或潜在问题，它会在控制台中给出相应的错误消息或警告提示，帮助你及时发现和修复问题。

通过使用 npm run serve，你可以在开发过程中更加高效地进行代码调试、样式修改和功能开发，同时获得实时的反馈和预览效果。值得注意的是，npm run serve 只用于开发环境，并不适用于生产环境。在部署应用程序时，你需要使用其他命令（如 npm run build）来构建生产版本的应用程序。通常运行在http://localhost:8080上。当你在浏览器中访问http://localhost:8080时，实际上是通过服务器加载和呈现你的Vue应用程序。

目录结构详解

如果发现没有babel.config.js，原因是在手动配置的时候没有选择Babel

项目的目录结构

node_modules | 所有的第三方包存储在这里
public目录 | 包含项目图标和单页面应用程序的首页
src目录 | 项目的源代码
- index.html 中 built files will be auto injected
- 当你构建生成的文件（例如打包后的 JavaScript 和 CSS 文件）时，这些文件会自动被注入到 HTML 文件中。
- 这意味着在构建过程中，Vue CLI 会自动将生成的文件链接添加到 HTML 文件的适当位置，以便在浏览器中正确加载所需的资源。
.broswerslistrc | 用于配置项目所需的目标浏览器的文件。
.gitignore | git的忽略文件
babel.config.js | babel的配置文件，
- 在创造项目配置文件时选择In dedicated config files（把Babel，Eslint等插件的配置项，放到自己独立的配置文件中。）
Jsconfig.json | 是一个用于配置 JavaScript 项目的文件，在 Vue 2 项目中通常不会使用到它。不过，如果你在 Vue 2 项目中使用了 TypeScript，那么它可能会起到一些作用。
package-lock.json |
package.json | 包管理配置文件
vue.config.js | 是一个用于配置 Vue 项目的文件，它允许你对构建过程进行自定义配置和扩展。该文件需要位于 Vue 项目的根目录下。

src目录

assets目录：存放第三方静态资源：图片资源，css样式表。。。
components：存放封装好的，可复用的组件
App.vue：项目的根组件，定义整个应用程序的结构和布局（UI结构）。
main.js：项目的入口文件，整个项目的运行，要先执行main.js

在一个 Vue 项目中，App.vue 通常位于 src 目录下，作为项目的入口组件。它由三个部分组成：<template>、<script> 和 <style>。

<template> 部分定义了应用程序的布局和内容。你可以在这里使用 Vue 的模板语法来构建页面结构，并绑定数据和事件。
<script>部分是组件的 JavaScript 部分。你可以在这里定义组件的逻辑、数据和方法等。name 属性用于指定组件的名称，这个名称将在组件之间的通信和引用中使用。
<style>部分用于定义组件的样式。你可以在这里编写 CSS 规则，对组件进行样式设置

App.vue 作为根组件，通常会包含其他子组件，并通过组件之间的嵌套和通信来构建整个应用程序的界面和功能。

在 Vue CLI 创建的项目中，App.vue 是默认的根组件，并在 main.js 中引入和渲染。

项目的运行过程

在工程化的项目中，vue做的事很单纯：通过main.js把App.vue渲染到Index.html的指定区域中。

将App.vue里的UI结构替换掉index.html的#App-div盒子。
render函数指定的结构替换掉el所在的结构。
App.vue用来编写待渲染的模版结构。
index.html中需要预留一个el区域。
main.js把App.vue渲染到了index.html所预留的区域中。

main.js

//导入vue这个包，得到Vue构造函数。 
//导入了 Vue.js 库，并将其赋值给变量 Vue。这样可以在代码中使用 Vue.js 的功能和特性。
import Vue from 'vue'
//导入App.vue这个根组件，将来要把App.vue的模版结构渲染到HTML结构中。
//这行代码导入了一个名为 App 的 Vue 组件。
import App from './App.vue'//此行与App.vue相关

//这行代码设置 Vue.js 的生产提示为 false，表示在生产环境中禁用一些开发模式下的提示信息。
Vue.config.productionTip = false

//创建Vue的实例对象
new Vue({
  //el:'#app',
  //把render函数指定的组件渲染到HTML页面中
  render: h => h(App), //这里指定了要渲染App，将App.vue里的UI结构替换掉index.html的#App-div盒子。
}).$mount('#app')//将实例挂载到具有 id 属性为 app 的 DOM 元素上。

el:'#app'与$mount('#app')作用完全相同，二选一。

修改配置

如果对配置不满意,可以在根目录创建vue.config.js进行修改配置，如：前后端分离时，解决前端跨域问题

module.exports = {
   // 解决无法加载less的问题
    css: {
        loaderOptions: {
          less: {
            javascriptEnabled: true,
            modifyVars: {
              "primary-color": "red"
            }
          }
        }
      },
      // 解决跨域问题
      lintOnSave: false,
      devServer: {
        // 设置代理
        proxy: {
           "/api":{
	         target: 'http://localhost:5000',  // 后端接口api地址
	          changeOrigin: true,// 开启代理：在本地会创建一个虚假服务器，然后发送请求的数据，
	                            //并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
	          pathRewrite: {  // 路径重写：将路径中 /api 替换为''（空字符串），保证路径访问正确,如:'/api/search/users2'====>'http://localhost:5000/search/users2'
	              '^/api': ''
	          }
            }
        }
        
    }
    
};

箭头函数

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

基础语法

(param1, param2, …, paramN) => { statements } 
(param1, param2, …, paramN) => expression
//相当于：(param1, param2, …, paramN) =>{ return expression; }

// 当只有一个参数时，圆括号是可选的：
(singleParam) => { statements }
singleParam => { statements }

// 没有参数的函数应该写成一对圆括号。
() => { statements }

参考： https://blog.csdn.net/qq_45297578/article/details/116244941

https://blog.csdn.net/hlonelier/article/details/130964257

https://blog.csdn.net/haochangdi123/article/details/80274210

https://blog.csdn.net/weixin_46769087/article/details/128247366

https://blog.csdn.net/hlonelier/article/details/130964257