node_modules:项目依赖文件夹
public:一般放置一些静态资源(图片)。需要注意,放在public文件夹中的静态资源,webpack进行打包的时候,会原封不动的打包到dist文件夹中。
src(程序员源代码文件夹 ):
- assets:一般用于存放静态资源(放置多个组件共用的静态资源),需要注意,放在assets文件夹里的静态资源,在webpack打包的时候,webpack会把静态资源当做一个模块,打包到JS文件里面。
- components:一般放置非路由组件(全局组件)
- pages:存放路由相关组件(pages也可换成views)
- router:路由配置文件
- store:vuex相关文件
- api:放关于axios二次封装的文件
- App.vue:唯一的根组件(汇总所有组件)
- main.js:入口文件,也是整个程序当中最先执行的文件
.gitignore:git版本管制忽略的配置(一般不碰)
babel.config.js:babel的配置文件(相当于翻译官,比如把ES6相关语法翻译为ES5,兼容性更好,一般不碰)
package.json:应用包配置文件(类似于项目身份证,记录着项目名称、项目依赖、项目运行等信息)
package-lock.json:包版本控制文件(缓存性文件)
README.md:应用描述文件(说明性文件)
vue.config.js:可以对脚手架进行个性化定制,如何配置可以参考Vue CLI
初始化vue项目的其他配置
1.浏览器自动打开
在package.json文件中,在serve属性后面追加--open --host=localhost
"scripts": {
"serve": "vue-cli-service serve --open --host=localhost",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
2.关闭eslint校验工具
创建vue.config.js文件:需要对外暴露
module.exports = {
lintOnSave:false,
}
3. src文件夹的别名的设置
注意:最新vue脚手架版本默认已经配置好了
因为项目大的时候src(源代码文件夹):里面目录会很多,找文件不方便,设置src文件夹的别名的好处,找文件会方便一些
创建jsconfig.json文件
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
]
}
},
"exclude": [
"node_modules",
"dist"
]
}