vue脚手架的搭建2.0和3.0

1.首先安装nodejs，查看node版本。
在这里插入图片描述

安装npm，查看npm版本

在这里插入图片描述

全局安装webpack。先安装3.0版本，vuecli2依赖3.0版本。
在这里插入图片描述

局部安装，先进入项目目录，执行

在这里插入图片描述

初始化项目之后，执行

在这里插入图片描述
只需要安装一次

vue-cli2

2.安装vue-cli2

切换淘宝镜像：

npm install cnpm -g --registry=https://registry.npm.taobao.org

创建项目：Vue init webpack 项目名

在这里插入图片描述

选项使用这里的选项：

在这里插入图片描述

使用vscode打开以后，项目结构如下：

在这里插入图片描述

在项目的根目录中创建vue.config.js的配置文件

在这里插入图片描述

'use strict'
const path = require('path')
const webpack = require('webpack');
function resolve(dir) {
    
    
  return path.join(__dirname, dir)
}

const port = 8084

module.exports = {
    
    
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  productionSourceMap: false, // 改为false可一定程度上解决浏览器f12查看到源码的问题
  devServer: {
    
    
    disableHostCheck: true,
    port: port,
    overlay: {
    
    
      warnings: false,
      errors: true
    },
    proxy: {
    
    
      '/api': {
    
    
        target: `http://localhost:8081/`,
        changeOrigin: true,
        pathRewrite: {
    
    
          '^/api': ''
        }
      }
    }
  },

  chainWebpack(config) {
    
    
    config.plugins.delete('preload') // TODO: need test
    config.plugins.delete('prefetch') // TODO: need test

    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
    
    
        symbolId: 'icon-[name]'
      })
      .end()

    // set preserveWhitespace
    config.plugin('provide')
    .use(webpack.ProvidePlugin, [{
    
    
        $: 'jquery',
        jquery: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        semantic: 'semantic-ui-css',
        Semantic: 'semantic-ui-css',
        'semantic-ui': 'semantic-ui-css'
    }]);
// 解决 cli3 热更新失效 https://github.com/vuejs/vue-cli/issues/1559
// 只要在chainwebpack的配置项下加一行config.resolve.symlinks(true)这样我们修改保存.vue文件以及js代码就会自动刷新，
config.resolve.symlinks(true);

// 创建 import 或 require 的别名，来确保模块引入变得更简单。
config.resolve
    .alias
    .set('@', resolve('src'))
    .set('vue$', 'vue/dist/vue.esm.js')
    .set('@api', resolve('src/api'))
    .set('@assets', resolve('src/assets'))
    .set('@scss', resolve('src/assets/scss'))
    .set('@components', resolve('src/components'))
    .set('@plugins', resolve('src/plugins'))
    .set('@views', resolve('src/views'))
    .set('@router', resolve('src/router'))
    .set('@store', resolve('src/store'))
    .set('@layout', resolve('src/layout'))
    .set('@static', resolve('src/static'))
    .set('@images', resolve('src/static/images'))
    .set('@css', resolve('src/static/css'))
    .set('vendor',resolve('src/vendor'));


    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
    
    
        options.compilerOptions.preserveWhitespace = true
        return options
      })
      .end()

    config
      // https://webpack.js.org/configuration/devtool/#development
      .when(process.env.NODE_ENV === 'development',
        config => config.devtool('cheap-source-map')
      )

    config
      .when(process.env.NODE_ENV !== 'development',
        config => {
    
    
          config
            .plugin('ScriptExtHtmlWebpackPlugin')
            .after('html')
            .use('script-ext-html-webpack-plugin', [{
    
    
            // `runtime` must same as runtimeChunk name. default is `runtime`
              inline: /runtime\..*\.js$/
            }])
            .end()
          config
            .optimization.splitChunks({
    
    
              chunks: 'all',
              cacheGroups: {
    
    
                libs: {
    
    
                  name: 'chunk-libs',
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10,
                  chunks: 'initial' // only package third parties that are initially dependent
                },
                elementUI: {
    
    
                  name: 'chunk-elementUI', // split elementUI into a single package
                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
                },
                commons: {
    
    
                  name: 'chunk-commons',
                  test: resolve('src/components'), // can customize your rules
                  minChunks: 3, //  minimum common number
                  priority: 5,
                  reuseExistingChunk: true
                }
              }
            })
          config.optimization.runtimeChunk('single')
        }
      )
  }
}

文件描述：

在这里插入图片描述

node_modules存放下载下来的模块，如jQuery，router等等
babel的配置文件，ES6→ES5的配置文件

package.json和package-lock.josn都是符合npm包的说明书，用来配置包的版本和依赖（package-lock.josn控制包版本、下载地址）

serve和dev分别对应npm run dev和npm run serve，运行哪一个看package.json的script是dev还是serve
build是最后一次编译，也就是打包了（.html、.css、.js、.vue）
lint几乎不用，就是把你写的js和vue进行一次全面大检查，看哪里写的不对，写的不好
.gitignore是git的忽略文件，哪些文件或文件夹不想接受git的管理在这里配好
main.js当执行npm run dev/serve之后第一个执行，是一切的开端
template放结构 script放交互 style放样式 assets静态资源

vue-cli3

创建vue脚手架3.0版本
1.命令行创建： Vue create 项目名

在这里插入图片描述

目录结构：

在这里插入图片描述

在项目的根目录下创建配置文件vue.config.js文件和2版本的一样；

配置选项：

publicPath：默认是 /
部署应用时的基本url，用法和webpack的output.publicPath一致。这个配置也可以设置成空字符串或者./
outputDir：默认是dist
输出文件目录。我们执行npm run build时会将代码打包到对应的目录。
assetsDir：默认是空字符串
放置生成的静态资源目录
indexPath：默认是index.html
指定生成的index.html的输出路径，也可以是一个绝对路径
lintOnSave：默认是true是否在保存的时候使用eslint-loader进行语法检查，可以设置为true、false、error。设置为error时，检查出语法不规范的地方会直接编译失败。
productionSourceMap：默认是true
如果你不需要生产环境的source map，可以设置为false。以加速生产构建
devServer：设置开发的服务器配置
可以设为open、host、port、https、hotOnly、proxy

vue 的2和3版本main.js有所区别，在3版本中引入的不再是Vue的构造函数（构造函数需要使用new去调用），引入的是一个createapp的工厂函数（无需通过new，直接调用就也可以）。

import {
    
     createApp } from 'vue'
import App from './App.vue'
import router from './router'

let app = createApp(App)//创建Vue实例

app.use(router)

app.mount('#app')

在2版本中main.js是这样的：

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    
    
  el: '#app',
  router,
  render: h => h(App)
})