Vue面面后台-01-项目初始化

项目初始化

1. 项目初始化

vue create my_mm  //vue create 项目名称

2.选择相关选项

3.选择版本号

4.选择路由模式

-   y 表示采用history模式
-   n 表示采用hash模式

5. 选中css预处理

6.选择代码校验规范

7.选择代码触发条件

这里建议两个都选上，更严谨。

Lint on save：在保存文件时会检查eslint错误。
Lint and fix on commit：每当执行 git commit 提交的时候，会自动修正eslint错误。

8. 选择代码校验配置文件形式

Babel、ESLint 等工具会有一些额外的配置文件，这里的意思是问你将这些工具相关的配置文件写到哪里：

In dedicated config files：分别保存到单独的配置文件
In package.json：保存到 package.json 文件中

9. 选择是否保存默认配置

这里里是问你是否需要将刚才选择的一系列配置保存起来，然后它可以帮你记住上面的一系列选择，以便下次直接重用。

10. 回车后，进入安装依赖包的过程

向导配置结束，开始装包。安装包的时间可能较长，请耐心等待......

11. 安装完成后出现如下效果

12. 运行项目

# 进入你的项目目录
cd mytest

# 启动开发服务
npm run serve

vue中配置使用element-ui组件库

1、使用以下命令安装组件库依赖

npm install element-ui --save

2、在main.js文件中配置如下代码


import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
 
Vue.config.productionTip = false
Vue.use(ElementUI);
 
new Vue({
  render: h => h(App),
}).$mount('#app')

3、使用组件库，在App.js中使用组件中的按钮组件，代码如下

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
  </div>
</template>

配置axios

安装axios包

// npm安装
npm install axios

安装完成后导入 main.js

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

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

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