# ghEliotaWoekpalce

**Repository Path**: gonghao_git/gh-eliota-woekpalce

## Basic Information

- **Project Name**: ghEliotaWoekpalce
- **Description**: 文件托管仓库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-03-16
- **Last Updated**: 2023-03-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

工程开始：



```
vue：			https://cn.vuejs.org/
elmentUI		https://element.eleme.io/#/zh-CN/component/installation
Vuex: 			https://vuex.vuejs.org/zh/index.html
Vite官网: 		https://cn.vitejs.dev/
axios中文文档: 		http://www.axios-js.com/zh-cn/docs/
```





```
淘宝镜像加速： npm config set registry https://registry.npm.taobao.org
```



- 创建vue工程

```
npm install -g @vue/cli

-vue create 项目名称
vue create springboot-vue-demo
	-Manger select feature
		-VueX
		-Router
		-Babel
	-3.x
	Y
	-In package.json
-进入创建的文件夹下
npm run serve
```



IDEAL设置

编辑配置 --> npm --> script --> serve

- 设置启动自启

```
- package.json
"serve": "vue-cli-service serve --open",
```

![image-20230315045844000](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230315045844000.png)

在vue.config.js添加服务启动设置

```
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    open: true,
    host: 'localhost',
    port: 8080
  }
})
```



Hellovuew是删除，桌面组件清空，创建Header.vue,设置div快，设置全局cssy样式

```
-global.css
/*先清除样式*/
*{
    /*外边距*/
    margin: 0;
    padding: 0;
    /*盒装模型设置*/
    box-sizing: border-box;
}
```



- 安装elementUI 

> [(38条消息) Vue3项目下载并使用element-plus及echarts的方法_vue下载echarts_发呆的海绵宝宝的博客-CSDN博客](https://blog.csdn.net/qq_52673040/article/details/127792056)
>
> [组件 | Element](https://element.eleme.cn/#/zh-CN/component/quickstart)
>
> -main.js
>
> import ElementUI from 'element-ui'; 
>
> import 'element-ui/lib/theme-chalk/index.css';
>
> Vue.use(ElementUI);





组件引用和跳转：

> ```
> 1.-创建oneView.vue
> <script>
> export default {
>   name: "two"
> }
> </script>
> 
> 内含有一句话：
> <template>
>   <h3>002页面</h3>
> </template>
> 
> 2.-router有个index.js可以注册路由
> const routes = {
> 	{
>     path: '/one',
>     name: 'one',
>     component: () =>import('../views/OneView.vue')
>     //此处不写.vue好像也可以
>   }
> }
> 
> 3.链接
> <router-link to="/three">Vue3</router-link>
> ```



字符串传递：

```
--将template组件输出为一个Helloword组件,可通过<Helloword></Helloword>
<script>
export default {
  name: 'HelloWorld',
  props: {
    HelloMsg: String
  }
}
</script>

--该文件template标签下中留一个字符串的替换位置
<h3>{{HelloMsg}}</h3>

--在其他页面通过标签传递字符串
--<script>下
import HelloWorld from '@/components/HelloWorld.vue'
export default{
	components: {
    HelloWorld
  }

}
--template下使用，并传递HelloMsg(hello-meg)两者好像书写也都行。。。
<HelloWorld hello-msg="Welcome to Your Vue App"/>


```



> vueplus尝试（有点问题）
>
> npm install element-pius --save
>
> *npm co*nfig set legacy-peer-deps true



- 官网快速上手

```
-main.js
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/index.css'

createApp(App).use(store).use(router).use(ElementPlus).mount('#app')
```