Vuetify 着陆页项目教程
vuetify-landing-page Simple landing page made with VueJS and Vuetify 项目地址:https://gitcode.com/gh_mirrors/vu/vuetify-landing-page
1. 项目的目录结构及介绍
vuetify-landing-page/
├── public/
│ ├── index.html
│ └── ...
├── src/
│ ├── assets/
│ ├── components/
│ ├── App.vue
│ ├── main.js
│ └── ...
├── .gitignore
├── LICENSE
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
└── vue.config.js
目录结构说明
public/ : 包含项目的公共资源,如 index.html
。src/ : 包含项目的源代码,包括组件、资源文件、主应用文件等。
assets/ : 存放静态资源,如图片、样式文件等。components/ : 存放 Vue 组件。App.vue : 主应用组件。main.js : 项目入口文件。 .gitignore : 指定 Git 忽略的文件和目录。LICENSE : 项目许可证。README.md : 项目说明文档。babel.config.js : Babel 配置文件。package-lock.json : 锁定依赖版本。package.json : 项目依赖和脚本配置。vue.config.js : Vue 项目配置文件。
2. 项目的启动文件介绍
main.js
import Vue from 'vue';
import App from './App.vue';
import vuetify from './plugins/vuetify';
Vue.config.productionTip = false;
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app');
文件说明
导入 Vue 和 App 组件 : 引入 Vue 库和主应用组件 App.vue
。导入 Vuetify : 引入 Vuetify 插件。配置 Vue : 设置 productionTip
为 false
,以减少生产环境中的提示信息。创建 Vue 实例 : 创建一个新的 Vue 实例并挂载到 #app
元素上。
3. 项目的配置文件介绍
vue.config.js
module.exports = {
transpileDependencies: [
'vuetify'
]
};
文件说明
transpileDependencies : 指定需要转译的依赖项,这里包括 Vuetify。
babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
};
文件说明
presets : 配置 Babel 预设,使用 Vue CLI 提供的预设。
package.json
{
"name": "vuetify-landing-page",
"version": "1.0.0",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vuetify": "^2.2.11"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-cli-plugin-vuetify": "~2.0.7",
"vuetify-loader": "^1.3.0"
}
}
文件说明
scripts : 定义项目的脚本命令,如 serve
、build
和 lint
。dependencies : 项目的运行时依赖。devDependencies : 开发环境依赖。
vuetify-landing-page Simple landing page made with VueJS and Vuetify 项目地址:https://gitcode.com/gh_mirrors/vu/vuetify-landing-page