vue-cli脚手架初始化项目各个文件夹用途

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.浏览器自动打开

扫描二维码关注公众号,回复: 14826491 查看本文章

在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"
    ]
}

猜你喜欢

转载自blog.csdn.net/qq_42691298/article/details/128708014