- 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:相应的路由组件
注意项目上中下结构
路由组件:\\路由组件为会变化的,非路由组件是不变化的
标签:vue,cli,项目,文件夹,组件,路由 From: https://www.cnblogs.com/zengyu123/p/17172322.html