单独创建Vue_Cli的过程笔记

学习目标是脱离Vue官网提供的Vue脚手架,自己来配，更深入的理解他们是如何工作的

一.创建一个空的项目

二.我们知道一个网页要有首页所以先创建一个index.html页面，并写好格式（添加组件挂载点）

三.后面我们会用到Webpack工具他会将我们所有的js，css进行打包成一个js和一个css文件，在首页的index.html引入的js是打包后的js文件，因此我们就需要创建两个目录src用于创建源代码的文件，第二个文件是dist（distribute：分发，分配）用于存储打包后的文件和分发到各个服务器上

四.在进行Webpack打包的时候需要告诉Webpack项目从哪个文件开始分析，一般的入口文件我们写成main.js文件：

五.在入口文件需要创建Vue实例,如果在这样的单页面项目中采用CDS,会导致项目在后期更新的时候会出现依赖包的版本问题，所以我们这里就引入的node.js中的npm来对我们的项目中的依赖行管理，先下载npm在nodejs的官网：https://nodejs.org/en/

 

下好之后一直next，查看是否安装就使用cmd命令板，查看npm -v进行查看npm的版本号

六.在编译器的命令终端使用npm的命令来下载依赖包

 Npm -i vue Element

Npm -uninstall vue (删除vue)

Npm -i vue@laste (下载最新版本的vue)

会在目录中创建一个node_modules目录来包含下载的依赖

还会在更目录下创建两个文件

 

 

七.

1. 我们在项目创建好后需要用到webpack打包器来帮我们进行代码的打包(webpack)，以及使用终端命令来操控webpack-cli,还需要一些代码转换的工具（使用sass[sass-loder、sass],sass转化为css[css-loader]，需要将转换css放在style中需要[style-loader],为了兼容低版本的浏览器将ES6语法转换为低版本[babel-loader、@bable/core（bable的核心库）、@bable/preset-env（bable的预设集合，env表示兼容最新js语法）]，将vue文件转换为js代码[vue-loader],需要将vue中的模板转换成为html[vue-template-compiler(vue模板编译器)]）

Npm i -D webpack webpack-cli sass-loder sass css-loader style-loader babel-loader @bable/core @bable/preset-env vue-loader

其中的-D指的是development(开发)依赖

八.对于文件的源文件和打包文件的目录所以要在根目录下创建一个配置文件Webpack.config.js

const { assert } = require("console");
const {VueLoaderPlugin}=require("vue-loader")

const path=require("path");       //require是Commonjs的导入语法

module.exports={      //exports是Commonjs的导出语法
  entry:"./src/main.js",   //编译解析开始的位置
  output:{     //打包导出的
    //打包导出的路径(绝对路径，不能是相对路径)，__dirname表述当前项目文件夹的绝对路径
    //由于在不同的系统中的目录分割符是不一样的，此时需要用到node内置的模块path(它能够获取当前的操作系统)
    //此处我们采取path模块的reslove方法可以将传进的两个参数以对应的操作系统的目录分割符来拼接
    // push:__dirname+"",   
    push:path.resolve(__dirname,"dist"),  
    file:"bundle.js"     //打包后的文件的名字
  },
  module:{     //模块，webpack中所有文件多叫模块
    rules:[       //模块的打包规则
      {test: /\.vue$/,use: 'vue-loader'},   //test是进行匹配文件的（正则表达式） use表示使用什么loader来处理什么文件
      {test: /\.css$/,use:['style-loader','css-loader']},
      {
        test: /\.m?js$/,
        use:{
          loader:'babel-loader',
          option:{
            presets:['@babel/preset-env'],
          }
        },
      },
      //添加图片打包规则老方法
      // {test: /\.(png|jpe?g|gif|svg|webp)$/,use:{loader:'file-loader',Option:{esModule:false}}}
      //添加图片打包规则新方法
      {test: /\.(png|jpe?g|gif|svg|webp)$/,type:'asset/resource'}, 
    ]
  },
  plugins:[    //给webpack增加任何功能，数组里时插件的实例化
    new VueLoaderPlugin()
  ],
}

 九.让后就是对main.js的配置

mport {createApp} from "vue"   //导入Vue应用实例,其中的createApp是新版本创建应用实例的方法（老版本的new Vue不兼容）
import App from "./App.vue"   //获取组件

createApp(App).mount("#app");    //组件挂载在html中

 这个文件用于挂载每一个组件，后面如有多个组件，将会使用import导入组件实例,让后通过createApp进行挂载，此处直接挂载的原因是webpack.config.js进行的导出配置main.js导出后就是bundle.js文件,让后在index.html进行了引用

十.Package.json管理的是各个依赖的版本以及可在其中写出打包执行的命令

 

十一.后面的开发主要就是使用单页面组件