SC-UI 项目安装与使用教程
1. 项目目录结构及介绍
sc-ui/
├── public/
│ ├── index.html
│ └── ...
├── src/
│ ├── assets/
│ ├── components/
│ ├── layouts/
│ ├── router/
│ ├── store/
│ ├── views/
│ ├── App.vue
│ ├── main.js
│ └── ...
├── .env
├── .env.development
├── .env.production
├── .gitignore
├── babel.config.js
├── jsconfig.json
├── package.json
├── README.md
└── vue.config.js
目录结构说明
- public/: 存放静态资源文件,如
index.html
。 - src/: 项目源代码目录。
- assets/: 存放静态资源,如图片、字体等。
- components/: 存放项目中使用的 Vue 组件。
- layouts/: 存放页面布局组件。
- router/: 存放 Vue Router 相关配置文件。
- store/: 存放 Vuex 状态管理相关文件。
- views/: 存放页面视图组件。
- App.vue: 项目的根组件。
- main.js: 项目的入口文件。
- .env: 全局环境变量配置文件。
- .env.development: 开发环境变量配置文件。
- .env.production: 生产环境变量配置文件。
- .gitignore: Git 忽略文件配置。
- babel.config.js: Babel 配置文件。
- jsconfig.json: JavaScript 配置文件。
- package.json: 项目依赖和脚本配置文件。
- README.md: 项目说明文档。
- vue.config.js: Vue CLI 配置文件。
2. 项目启动文件介绍
main.js
main.js
是项目的入口文件,负责初始化 Vue 应用并挂载到 DOM 节点上。以下是 main.js
的基本结构:
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app');
文件说明
- Vue: 导入 Vue 库。
- App: 导入根组件
App.vue
。 - router: 导入路由配置。
- store: 导入状态管理配置。
- Vue.config.productionTip: 关闭生产环境提示。
- new Vue: 创建 Vue 实例并挂载到
#app
节点上。
3. 项目配置文件介绍
vue.config.js
vue.config.js
是 Vue CLI 的配置文件,用于自定义项目的构建配置。以下是一个简单的配置示例:
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/sc-ui/' : '/',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV !== 'production',
devServer: {
port: 8080,
open: true,
},
};
配置说明
- publicPath: 设置项目在生产环境下的公共路径。
- outputDir: 设置构建输出目录。
- assetsDir: 设置静态资源目录。
- lintOnSave: 设置是否在保存时进行代码检查。
- devServer: 开发服务器配置,如端口和自动打开浏览器。
.env
文件
.env
文件用于配置全局环境变量,.env.development
和 .env.production
分别用于配置开发和生产环境的环境变量。以下是一个示例:
# .env
VUE_APP_API_URL=http://localhost:3000
# .env.development
VUE_APP_API_URL=http://localhost:3000
# .env.production
VUE_APP_API_URL=https://api.example.com
环境变量说明
- VUE_APP_API_URL: 配置 API 的 URL,根据环境不同设置不同的值。
通过以上配置,您可以轻松地启动和配置 SC-UI 项目,并根据需要进行自定义调整。