一:用vue-cli正确构建一个项目的目录如下:
二:目录介绍如下:
2.1:一级目录/文件介绍如下:
build文件夹: 用于存放 webpack 相关配置文件
config文件夹: 用于存放 vue基本配置文件
node_modules文件夹: 用于存放 npm install 安装的依赖代码库
src文件夹: 主要用于存放 我们开发的代码。
staic文件夹: 主要用于存放 第三方静态资源
.babelrc: babel的一些配置,(将es6编译成es5的一些配置)
.editorconfig: 编辑器的一些配置(包括编码格式,缩进风格,换行格式)
.eslintignore: 配置我们不会对build文件和config文件进行语法检查。
.eslintrc.js: eslint的配置文件,主要是定义一些代码编写风格的规则。
.gitignore: 配置Git仓库忽略的一些文件(不会上传)
index.html: 入口html 文件。
package.json: 项目的一些配置信息(项目的一些具体信息)
2.2:二级目录/文件介绍如下:
build---------------------------->>>
build.js:生产环境构建;
check-versions.js:版本检查;
utils:构建相关工具;
vue-loader.conf.js:css加载器;
webpack.base.conf.js:webpack基础配置;
webpack.dev.conf.js:webpack开发环境配置;
webpack.prod.conf.js:webpack生产环境配置;
config----------------------------->>>
dev.env.js:项目开发环境配置;
index.js:项目主要配置(如端口、打包路径等);
prod.env.js:项目生产环境配置;
node_modules----------------->>>(略)
src-------------------------------->>>
assets文件夹:用于放置一些资源类文件(如图片等);
components文件夹:放组件文件;
router文件夹:放置路由文件;
App.vue:vue页面;
一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style);
其中模板只能包含一个父节点,也就是说顶层的div只能有一个;
style标签默认是影响全局的,如需只在该组件下起作用,需在标签上加scoped,<style scoped></style>;
如果写less文件,需在style标签里添加lang="less",<style lang="less"></style>;
如要引入外部css文件,首先需给项目安装css-loader依赖包(npm install css-loader);
main.js:入口文件
该文件主要用于引入vue框架、根组件、路由设置及插件等,并且定义vue实例,如下图所示