通用后台管理（二）——项目搭建

目录

前言

一、安装vue-cli依赖

1、使用yarn下载vue-cli

2、使用npm下载

3、检查一下是否下载成功

二、创建项目

1、创建项目，my-app是项目名称

2、 这里选择vue 2，蓝色表示选中的。

3、启动项目

三、下载项目依赖

四、配置项目

1、修改eslint（关闭代码编写不规范检查）

2、初始化文件

3、全局引入element-ui

4、基础路由配置

总结

前言

         使用vue-cli搭建一个简单的vue.在下载vue-cli之前需要先安装node.js和npm.而且最好是对应版本的npm，建议nodejs下载v16.13.2，对应的npm是8.1.2。

        具体步骤参考：http://t.csdnimg.cn/h4GrH

一、安装vue-cli依赖

1、使用yarn下载vue-cli

下载yarn

npm i -g yarn

​

安装vue-cli依赖

 yarn global add @vue/cli

​

2、使用npm下载

npm install -g @vue/cli

如果下载慢的话可以先更改npm的镜像

npm config set registry  https://npm.aliyun.com/

然后在重新下载一下。

3、检查一下是否下载成功

 vue -V

​可以查到版本号，并且是5开头的说明安装成功安装正确了 

如果下载了，但是还是查看不到版本信息，还是和没有安装的一样，可能是因为环境变量的原因，可以参考下面的解决办法：

【环境-0】Node js 本地环境安装及设置（亲测） - 知乎

二、创建项目

1、创建项目，my-app是项目名称

vue create my-app

2、 这里选择vue 2，蓝色表示选中的。

​

点开链接说明创建成功了。 

​

3、启动项目

npm run serve 

​

​

点开链接说明创建成功了。  

三、下载项目依赖

1、下载axios

npm install axios@0.27.2

2、下载echarts

npm i echarts@5.1.2

3、下载element-ui

npm i element-ui -S

4、下载vue-router

npm i vue-router@3.6.5

5、下载vuex

npm i vuex@3.6.2

6、下载mockjs

npm i mockjs

 7、下载less/less-loader

npm i less@4.1.2

npm i less-loader@6.0.0

四、配置项目

1、修改eslint（关闭代码编写不规范检查）

在vue.config.js文件中添加lintOnSave:false,

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  //关闭eslint校验
  lintOnSave:false,
})

2、初始化文件

在根目录下新建如下文件夹：

（1）新建router文件夹：

该文件夹下新建index.js文件：路由配置文件

（2）新建api文件夹

• 该文件夹下新建mockServeData文件夹，存放mock模拟数据
• 该文件夹下新建index.js文件：前端api接口
• 该文件夹下新建mock.js文件：mock模拟后端请求数据

（2）新建store文件夹

（2）新建utils文件夹：项目工具文件

3、全局引入element-ui

在main.js中添加如下：

### 


import ElementUI from 'element-ui'; //导入
import 'element-ui/lib/theme-chalk/index.css';//导入相关css
import App from './App.vue';


Vue.use(ElementUI);//全局注入

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

4、基础路由配置

1、在main.js文件中导入vue-router

//导入vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

2、创建路由组件

在src文件夹中新建一个views包含所有组件，

创建Home组件：

<template>
<h1>我是home</h1>
</template>
<script>
export default{
    data(){
        return{

        }
    }
}
</script>

创建User组件：

<template>
    <h1>我是user</h1>
    </template>
    <script>
    export default{
        data(){
            return{
    
            }
        }
    }
    </script>

3、将组件和路由映射

在router/index.js中添加

const routes = [
    { path: '/home', component: Home },
    { path: '/user', component: User }
  ]

4、创建router实例

在router/index.js中添加

const router = new VueRouter({
    routes // (缩写) 相当于 routes: routes
})

5、创建和挂载根实例

在router/index.js中添加

export default router 
//将router对象作为默认导出，在其他导入时直接导入router即可

在main.js中添加如下内容：

import router from "./router"
new Vue({
  router,
  render: h => h(App),
}).

6、路由出口，将路由匹配到的组件渲染在html中

在APP.vue中：

<template>
  <div id="app">
     <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'App'

  }
</script>

总结

到这里vue项目及其配置都已经创建和配置成功了。