前端vue入门(纯代码)04---全网最详细的Vue脚手架入门

01.脚手架前期准备知识点以及分析脚手架

• 【【注意：必须在管理员下运行终端，cmd】】

  • 然后再去创建vue项目和运行该项目

• 在VScode中打开终端窗口的快捷键命令：Ctrl + ~【Esc下面的按键】

• 停止在VScode终端开的服务器的快捷键命令：Ctrl + C 或 Ctrl +shift + C【以管理员的方式运行】

• Vue CLI叫做脚手架。CLI：Command-Line Interface，翻译为命令行接口工具，俗称脚手架。

• vue create 【项目名称】 :创建Vue项目

  • babel：ES6---->ES5
  • eslint：语法检查

• npm run serve:运行该Vue项目

脚手架项目目录结构【脚手架(CLI)版本：5.08】

① node_modules文件【依赖的node工具包目录】

用于存放项目中用到的依赖：

• node_modules里面是项目依赖包，其中包括很多基础依赖，自己也可以根据需要安装其他依赖。

• 安装方法为打开cmd，进入项目目录，输入npm install 【依赖包名称】，回车。

• 当前项目中的依赖项文件所在的文件夹（Vue脚手架项目的依赖项都在当前项目中），此文件夹不应该手动修改，在使用GIT管理项目时，此文件夹通常会被配置到.gitignore文件夹，以至于此文件夹不会被提交到GIT服务器，当从其它电脑上拉取项目时，也不会得到此文件夹及内部的文件，则项目是不可以运行的，需要在项目文件夹下执行npm install命令，会自动创建此文件夹，并根据package.json中配置的依赖项来下载所需的所有依赖项。

• 当项目依赖有问题时，可以把node_modules文件中的依赖包删掉，再在项目路径下 执行npm install ，它会根据你的package.json文件中的配置，全部下载下来，当然，前提是，你之前下载依赖包的时候，将其npm install 【依赖包名称】 --save-dev保存在package.json中了【不到万不得已，不要删掉node_modules文件】

② public文件

• 静态资源文件夹，通常存放.css文件、.js文件、图片等，也可以自行创建文件夹来管理相关文件，当项目启动后，可以以此文件夹作为URL的根路径来访问相关静态资源。

文件名	描述
index.html	主页，现在都是单页面应用，所以该 html 唯一的作用就是来驱动 main.js【是当前项目中唯一的.html文件，默认会显示此文件，通常不编辑此文件】
favicon.ico	图标文件，此图标通常会显示在浏览器的标签栏、收藏夹等位置，此文件的名称是固定的，如果要更换图标文件，必须使用新文件覆盖此文件，文件名不变

③ src文件【源码目录】

文件名	描述
assets	资源文件夹，也可以用于存放.css文件、.js文件、图片等，与[public文件]不同的地方在于此文件是在编译范围之内的 【即，将用ES6语法写高级js语法–>编译成，ES5等浏览器能解析的js语法】
assets -> logo.png	vue_test 中要用的图片，会被 webpack 的加载器当作模块处理，实际项目中的静态资源也建议放在该目录下
components	视图组件文件夹，通常用于存放.vue子组件
components -> HelloWorld.vue	vue_test 项目中定义的组件，实际项目中的自定义组件也建议放在该目录下
App.vue	vue_test 中的入口组件，实际项目中的入口组件也建议放在这个位置【默认已经绑定到index.html的视图组件，可以理解为是任何一个页面的显示入口】
main.js	vue_test 中的入口文件，里面会定义 Vue 对象，并使用入口组件 App.vue【项目的主配置文件，例如当安装了某个新的软件（添加了新的依赖）后，可能需要在此文件中添加一些配置】

④ 其他文件

文件名	描述
babel.config.js	是Babel的配置文件【babel：ES6—转成—>ES5】
jsconfig.json	是JavaScript的配置文件，学习初期不关注此文件
vue.config.js	是Vue的配置文件，学习初期不关注此文件
.gitignore	所有使用GIT管理项目都有此文件，用于配置GIT应该“忽略”的文件或文件夹
package-lock.json	是锁定的配置文件，是根据package.json自动生成的，不可手动修改【防止各种版本不兼容问题】
package.json	当前项目的配置文件，在创建项目时需要指定此文件作为配置文件，此文件中主要配置了npm命令的相关脚本、当前项目的依赖项，执行npm install ，它会根据你的package.json文件中的配置，将package.json中依赖全部下载下来
README.md	项目的介绍

​ 通过 Vue-CLI 构建的是一个标准的单页面应用结构，其生成的各个文件，以后我们可以按照项目的实际需求对各个配置文件进行修改，达到想要的效果。

1 vue.config.js文件

const {
    defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
   
  /* 默认情况【Default: false】下 babel-loader 会忽略所有 node_modules 中的文件。
  你可以启用本选项，以避免构建后的代码中出现未转译的第三方依赖。 */
  transpileDependencies: true,
  
  pages: {
   
    index: {
   
      //入口
      entry: 'src/main.js',
    },
  },
	lintOnSave:false, //关闭语法检查
	//开启代理服务器（方式一）
	/* devServer: {
    proxy: 'http://localhost:5000'
  }, */
	//开启代理服务器（方式二）
	devServer: {
   
    proxy: {
   
      '/atguigu': {
   
        target: 'http://localhost:5000',
				pathRewrite:{
   '^/atguigu':''},
        // ws: true, //用于支持websocket
        // changeOrigin: true //用于控制请求头中的host值
      },