vue 快速入门系列 —— 使用 vue-cli 3 搭建一个项目（上）

2023-11-22 17:37:34

其他章节请看：

vue 快速入门系列

使用 vue-cli 3 搭建一个项目（上）

前面我们已经学习了一个成熟的脚手架（vue-cli），笔者希望通过这个脚手架快速搭建系统（或项目）。而展开搭建最好的方法是向优秀的项目学习，依葫芦画瓢。

这里通过研究 vue-admin-template 项目，逐一引入 element-ui、axios、mock、iconfont、nprogress、权限控制、布局、多环境（.env）、跨域、vue.config.js，一步一步打造我们自己的架构。

Tip: vue-element-admin 是一个优秀的后台前端解决方案，把平时用到的一些组件或者经验分享给大家。而 vue-admin-template 就是它的一个简易版本。

注：由于篇幅过长，决定将文本拆分为上下两篇

模板项目 - vue-admin-template

vue-admin-template 以 vue-cli webpack 模板为基础开发，并引入如下依赖:

element-ui 饿了么出品的 vue pc UI框架
axios 一个现在主流并且很好用的请求库支持Promise
js-cookie 一个轻量的JavaScript库来处理cookie
normalize.css 格式化css
nprogress 轻量的全局进度条控制
vuex 官方状态管理
vue-router 官方路由
iconfont 图标字体
权限控制
lint

Tip：vue-cli webpack模板：

这个模板是 vue-cli verison 2.* 的主要模板
Vue-cli 3 包含此模板提供的所有功能（以及更多功能）
Vue-cli 3 来了，此模板现在被视为已弃用

下载项目并启动：

> git clone https://github.com/PanJiaChen/vue-admin-template.git vue-admin-template
> cd vue-admin-template
vue-admin-template> npm i
vue-admin-template> npm run dev

> vue-admin-template@4.4.0 dev
> vue-cli-service serve
...

创建项目

我们的项目 - myself-vue-admin-template

通过 vue-cli 创建项目

// 项目预设 `[Vue 2] less`, `babel`, `router`, `vuex`, `eslint`
$ vue create  myself-vue-admin-template

目录结构如下：

 myself-vue-admin-template
- mode_modules
- public
    - favicon.ico
    - index.html
- src
    - assets
        - logo.png
    - components
        - HelloWorld.vue
    - router
        - index.js
    - store
        - index.js
    - views
        - Aobut.vue
        - Home.vue
    - App.vue
    - mains.js
- .browerslistrc
- .editorconfig
- .eslintrc.js
- .gitignore
- babel.config.js
- package-lock.json
- package.json
- README.md

我们的项目 Vs 模板项目

项目 vue-admin-template 比 myself-vue-admin-template 多了如下目录和文件，其他都相同：

vue-admin-template
+ build
+ mock
+ src/api
+ src/icons
+ src/layout
+ src/styles
+ src/utils
+ src/permission.js
+ src/settings.js
+ .env.development
+ .env.production
+ .env.staging
+ .travis.yml 
+ jest.config.js 
+ jsconfig.json
+ postcss.config.js
+ README-zh.md
+ vue.config.js

使用的 @vue/cli 都是 4.x ：

//  myself-vue-admin-template
"devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",

// vue-admin-template
"devDependencies": {
    "@vue/cli-plugin-babel": "4.4.4",
    "@vue/cli-plugin-eslint": "4.4.4",
    "@vue/cli-plugin-unit-jest": "4.4.4",
    "@vue/cli-service": "4.4.4",
    "@vue/test-utils": "1.0.0-beta.29",

element-ui

模板项目如何使用 element-ui

// package.json
"dependencies": {
    "element-ui": "2.13.2",
}

// main.js
// ps: 无关代码未展示
import Vue from 'vue'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 国际化-英文
import locale from 'element-ui/lib/locale/lang/en' // lang i18n

import App from './App'

// set ElementUI lang to EN
Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)

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

这里引入 Element 是完整引入，另一种是按需引入
Element 组件内部默认使用中文，这里使用了英文
- element 的国际化其实就是对 element 中组件的国际化（查看文件 node_modules/element-ui/lib/locale/lang/en 就清楚了）

添加 element-ui

思路如下：

完整引入 element
无需提供翻译，默认使用中文
利用 vue-cli 提供的插件安装 element-ui

通过 vue-cli 直接安装

myself-vue-admin-template> vue add vue-cli-plugin-element

码农公寓