Vue工程的创建（以及导入Element）

---

一、Vue的创建

前置工作

在创建vue工程之前需要检查自己是否下载了node.js,若是 没有下载可以去node.js官网中下载。

创建Vue工程

下载完node.js之后就可以创建vue工程了，

1、打开管理员终端使用（vue create VueProjectName）命令创建工程

2、配置vue

输入完按回车之后：
这里一般直接选最后一个（Manually select features）按回车
进入到这个页面之后选Babel和Router即可（上下键控制，空格选取，回车确定）

进入到这个页面后它会让你选取你需要使用vue3还是vue2，这里如果你是初学者的话建议先选2即可，若是有基础的话，就自由选择即可

这里在进行一些vue的配置，这里并不是很重要选Y与N都可以

进入到下面的界面之后直接选取In package.json即可。

到这里就是问你是否保存预设，可以直接选N
到这里敲完回车之后将会开始自动创建vue

当到下面这个界面就说明已经创建完成了这里可以直接使用npm run serve来启动vue项目

这时就会出现这个界面表示已经执行成功了

可以打开网址

3、vs code运行

打开vs cde的资源管理器-在NPM 脚本找到serve… 并点击运行

---

二、Vue工程文件的说明

在创建完vue工程之后使用Vs code打开之后会发现有许多的文件，而这些文件都是做什么用的呢？

• public：此目录中是存放静态文件的地方，比如html，静态图标等等
• src：这时项目的源码目录
• src.assets:这里一般是存放logo、图片、自定义样式（css）等
• src.components:Vue的组件
• src.router:定义路由，每个路由对应着一个页面
• src.views:视图文件（前端页面）
• App.vue:所有页面的入口
• main.js:所有配置的入口，可以导入项目所需要的包然后组合在一起（与Mean非常的相似）
• vue.config.js:vue项目里的一些配置，可以配置端口、跨域等

---

三、导入Element

概念：element是一个组件，在你写页面时可以使用elment中的组件，来提升你开发的效率，比如你需要创建一个按钮，你可以使用里面的按钮组件直接套用。
简单的说他就是一个他就是一个一个的半成品的组件，在你需要使用时可以直接拿来用即可。

1、下载\导入Elment

在终端中使用：npm i element-ui -S此命令即可

2、配置Element

在main.js中添加一下代码：
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
最终main.js文件的呈现是：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

测试Element

在测试之前可以先把vue创建默认添加的代码清空
App.vue:

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

home.vue:

<template>
  <div class="home">
  </div>
</template>

<script>
export default {
  name: 'HomeView'
}
</script>

然后在home.vue文件中写入一个Element中所提供的按钮模型（可以在Element官网中找到）：

直接将代码复制到HomeView.vue中即可：

<template>
  <div class="home">
  //应用按钮模型
      <el-button type="success">成功按钮</el-button>
  </div>
</template>
<script>
export default {
  name: 'HomeView'
}
</script>

运行之后：

但是会发现按钮的左上方还是有留白，这时可以在src.assets文件下创建一个global.css样式,在里面设置：

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

然后在main.js文件中导入global.js样式import '@/assets/global.css'

这时保存在运行：

---

原文地址：https://blog.csdn.net/weixin_68576312/article/details/143619164

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！