初始化项目

查看vue版本号

vue --version

如果没有安装vue脚手架，那就用下面的命令安装

npm install -g @vue/cli

创建项目

vue create vue-admin-test

根据提示语，我选择了vue3配置项目，初始化完成

根据提示，启动本地服务器，浏览项目

cd vue-admin-test
npm run serve

浏览器打开http://localhost:8080/，就会出现欢迎页面👏

文件目录介绍及整理

项目初始目录

|—vue-admin-test |— public //项目打包后的目录 |— favicon.ico |— index.html |— src //项目开发目录 |— assets //静态文件 |— logo.png |— components //组件存放目录 |— HelloWorld.vue |— App.vue //主入口文件 |— main.js //主入口文件 |— .gitignore //git项目忽视文件 |— babel.config.js //babel 配置文件 |— package-lock.json //记录安装包的具体版本号 |— package.json //包的类型 |— README.md // 项目描述

这是最简单的目录，但是因为要搭建一个后台框架，所以在里面还要添加vuex、Bootstrap、vue-router、axios等等目录。

npm install axios vuex vue-router

整理后的目录

|—vue-admin-test |— public //项目打包后的目录 |— favicon.ico |— index.html |— src //项目开发目录 |— api |— api.js // 接口文档 |— assets //静态文件 |— logo.png |— components //组件存放目录 |— HelloWorld.vue |— config |— router.config.js // 路由文件 |— store |— store.js // vuex状态管理文件 |— utils // 存放各种依赖文件 |— axios.js |— views |— Home.vue |— App.vue //主入口文件 |— main.js //主入口文件 |— .gitignore //git项目忽视文件 |— babel.config.js //babel 配置文件 |— package-lock.json //记录安装包的具体版本号 |— package.json //包的类型 |— README.md // 项目描述

开发环境与线上环境部署

vue-cli 3.0x 需要自己部署环境

vue.config.js配置

项目初始化的时候，没有vue.config.js配置文件，因此需要在项目根目录下新建一个vue.config.js配置文件。

const path = require('path')
function resolve(dir){
     return path.join(__dirname,dir)
}
module.exports = {
  chainWebpack: config => {
    //设置别名
    config.resolve.alias
    .set('@',resolve('src'))
    .set('assets', resolve('./src/assets'))
    .set('components',resolve('./src/components'))
  },
  devServer: {
      open:true  //打开浏览器窗口
  }
}

为什么要设置alias（别名）

• 项目中会设置alias（别名），避免通过…/…/导入
• 打包效率增加，避免找错文件层级

  Ant design vue

  安装ant-design-vue

  npm i --save ant-design-vue@next -S

  main.js引入ant-design-vue ```vue import Antd from ‘ant-design-vue’; import ‘ant-design-vue/dist/antd.css’;

const app = createApp(App) app.use(Antd)

⚠️ 注意：
- 如果出现Uncaught TypeError: Cannot read property ‘use‘ of undefined，那是因为版本的问题
-  报错信息
```vue
ReferenceError: Antd is not defined

解决办法：在babel.config.js里添加下面几行

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      "import",
      { libraryName: "Antd", libraryDirectory: "es", style: true } //注意：libraryName这里一定要是Antd !!!
    ]
  ]
}

配置vue-router路由

vue-router
vue3.0创建实例的改变，vue3.0中使用createApp 来创建vue实例
main.js引入vue-router

import router from './config/router.config'
createApp(App,Antd).use(router).mount('#app')

路由配置

注意：

• import和export的区别及用法总结（区别默认导出和名字导出）

  引入并封装axios

  axios

  引入vuex

  vuex

  首页布局设计

  结语