vue项目实践1，项目中各个文件夹

1. vue-cli脚手架初始化项目。

node + webpack + 淘宝镜像

node_modules文件夹：项目依赖文件夹

public文件夹：一般放置一些静态资源（图片），放在public里面的静态资源，webpack在进行打包时，会原封不动的打包到dist文件夹中。

src文件夹（程序员源代码文件夹）：

　　assets文件夹：一般也是放置的静态资源（一般放置多个组件共用的静态资源），放在assets文件夹里的静态资源，在webpack打包的时候，webpack会把静态资源当作一个模块，打包js文件里面。

　　components文件夹：一般仿制的是非路由组件（全局组件）。

　　App.vue：唯一的根组件。vue当中的组件（.vue）、

　　main.js：程序的入口文件，也是整个程序中最先执行的文件

　　babel.config.js：配置文件（与babel相关）

　　package.json文件：认为是项目的身份证，记录项目名字、有哪些依赖、项目怎么运行

　　package-lock.json文件：缓存性文件

　　README：说明性文件

　　2.项目的其他配置

 

2.1运行项目时，浏览器自动打开：

在package.json中，添加--open

"scripts": {

    "serve": "vue-cli-service serve --open",

    "build": "vue-cli-service build",

    "lint": "vue-cli-service lint"

  }

2.2 关闭eslint校验功能

vue.config.js中配置

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({

  transpileDependencies: true,

  lintOnSave: false //校验关闭

})

2.3 配置src文件夹别名 @

jsconfig.json中配置，@代表src

 

3.项目路由的分析

vue-router

前端所谓路由：kv键值对。

key：URL（地址栏中的路径）

value：相应的路由组件

注意项目上中下结构

路由组件：\\路由组件为会变化的，非路由组件是不变化的