毕设学习--前端Vue基础知识

Vue Ui创建项目：

预设可自选，如果后续配置一样的话，可以设置一个默认的预设配置。

Vue项目目录介绍：

• public: 放静态文件的地方，比如html、静态图标等等
• src:项目的源码目录
• src.assets: 可以放一些logo、图片、自定义样式等
• src.components: vue组件，也就是页面中的组件
• src.router: 定义路由，每个路由对应一个页面
• src.views: 视图文件，也就是页面文件
• App.vue: 所有页面的入口
• main.js: 所有配置的入口，可以导入项目所需要的包，然后组合在一起
• vue.config.js: vue项目里的一些配置，可以配置端口、跨域等等

Vue项目如何在Idea运行：

创建好Vue项目之后，在Idea中打开，然后在左上角进行配置运行环境即可。

Global.Css样式：

清除控件自带的默认样式。

在asset文件下创建global.css样式，然后在main.js中引入该样式。

body {
    margin: 0;
    padding: 0;
}
/*把所有的元素变成盒装模型*/
* {
/*    外边框不会额外占用1px的像素*/
    box-sizing: border-box;
}

import '@/assest/global.css'

Element-Ui组件：

安装Element-Ui命令：在需要使用该组件的Vue项目中进行安装组件。

npm i element-ui -S

//在main.js文件中引入
import Vue from 'vue';
//---引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//----
import App from './App.vue';

//---引入
Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});