Vue做项目环境搭配流程

最新推荐文章于 2024-08-30 11:58:55 发布

前端小草籽

最新推荐文章于 2024-08-30 11:58:55 发布

阅读量2.1k

点赞数 1

分类专栏： Vue的学习文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_47075145/article/details/127353970

版权

Vue的学习专栏收录该内容

17 篇文章 3 订阅

订阅专栏

推荐写法：在跟src同级创建一个 plugins/element.js文件

4.CSS预处理器SCSS

5.reset.css文件 (去掉默认样式)

项目搭建

整个项目用的是Vue2，然后脚手架是 @vue/cli 5.0.8(5版本的)

1.安装Vue脚手架

01.npm install -g @vue/cli 安装脚手架(应该都是安装好了的)

02.vue -V 查询脚手架版本

2.创建项目

vue create 项目名称

注意：项目名称不要用中文名

3.按需引入Element-UI

网址:https://element.eleme.cn/#/zh-CN/component/installation

01:npm 安装Element-UI

npm i element-ui -S

02: npm install babel-plugin-component -D

注意点：npm i xx -D：npm install xx --save-dev的简写，对模块进行局部安装，模块写入到 devDependencies 对象。将依赖安装在开发环境下。

03.在babel.config.js 文件中

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    // ["es2015", { "modules": false }]  原来是这样写，但是在最新版的脚手架下要向下面这种写
    ["@babel/preset-env", { "modules": false }],
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

推荐写法：在跟src同级创建一个 plugins/element.js文件

因为引入elementUI组件后， Vue.use();会出现很多次在main.js文件夹里面，我们应该让main.js文件中代码不那么繁琐。所以可以在在跟src同级创建一个 plugins/element.js文件。

在 plugins/element.js 文件中：类似于下面这种写法

//引入vue
import Vue from 'vue';
//引入要用到的 elementUI组件
import { Button, Row} from 'element-ui';

//应用引入的element-ui组件
Vue.use(Button);
Vue.use(Row);

然后在 main.js 中写引入：

//引入存放elementUI相关组件的文件
import '../plugins/element.js'

就能实现跟把相关代码全写在main.js中一样的功能。

4.CSS预处理器SCSS

SCSS官网：

Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网

额，我用的css写的

5.reset.css文件 (去掉默认样式)

官网：CSS Tools: Reset CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

我们把代码复制下来放在项目中新建的reset.css文件(assets/css/reset.css),然后在app.vue的style中进行引入：

<style lang='scss'>
  @import url('./assets/css/reset.css');
</style>

6.图标库安装使用

使用的是阿里巴巴字体图标库中的图标：使用步骤：

(181条消息) vue使用小技巧之如何使用阿里巴巴矢量图标库_张培跃吧的博客-CSDN博客

eg：

<i class="iconfont icon-gouwuchekong"></i>

7.axios的安装使用

01.下载 axios

npm i --save axios

02.在main.js中引入 axios，并挂载到原型上面，让其全局可以使用。

import axios from "axios";
axios.defaults.baseURL = "http://localhost:8080/api"  //引入axios   这个为前端地址
Vue.prototype.$axios = axios;  //把axios放到Vue的原型链上去

axios的跨域解决操作步骤：