@vue/cli 4.x的安装与使用（Vue）

偏执的太偏执、 2022-09-10 06:09 304阅读 0赞

环境：

macOS

安装nodejs：

brew install nodejs

查看版本：

node -v
    npm -v

设置npm源：

npm config set registry https://registry.npm.taobao.org

安装vue：

npm install -g @vue/cli

查看vue的版本：

vue -V

**@vue/cli 4.5.13**

# 1、vue-cli脚手架创建项目： #

首先，创建一个目录：

mkdir vue-front-blog
    cd vue-front-blog

然后创建项目：

vue create .

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16][]

选择‘Manually select features’ ，

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 3][]![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 5][] ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 6][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 7][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 8][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 9][]

安装中......

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 10][] 安装成功：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 11][]

**注意：element-ui只支持2.6以下的版本，Vue3.0要使用element-ui就要使用element-plus！！！**

在该项目中安装**element-plus**：

vue add element-plus

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 12][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 13][] 安装中......：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 14][] ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 15][]

import { createApp } from 'vue'
    import App from './App.vue'
    import './registerServiceWorker'
    import router from './router'
    import store from './store'
    import installElementPlus from './plugins/element'
    
    const app = createApp(App)
    installElementPlus(app)
    app.use(store).use(router).mount('#app')

## 2、vue cli4中使用normalize.css、axios、nprogress ##

normalize.css支持包括手机浏览器在内的超多浏览器，同时对HTML元素，排版，列表，嵌入的内容，表单和表格都进行了一般化。尽管这个项目进行了一般化的原则，但我们还是在合适的地方使用了更实用的默认值。

作用（官网描述）：

*  保护有用的浏览器默认样式而不是完全去掉它们；
 *  一般化的样式：为大部分HTML元素提供；
 *  修复浏览器自身的bug并保证各浏览器的一致性；
 *  优化CSS可用性：用一些小技巧；
 *  解释代码：用注释和详细的文档来

安装normalize.css：

npm install --save normalize.css

main.js引入：

import 'normalize.css/normalize.css'

如果引入報錯，可能没有安装css-loader 和style-loader：

npm install css-loader style-loader

安装axios、nprogress：

npm install -save axios nprogress

main.js引入：

import 'nprogress/nprogress.css'

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/494ce0292e524015b3982090a5625c8c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/1b5e496da005403f90f3757370b57ca2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/4b365df798d345509037e4fb199487b7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/20210905184803731.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5aSp6b6Z6Iez5bCK,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220829/eedad0cc41da49af93371610314fbbe0.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/20210905184920492.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5aSp6b6Z6Iez5bCK,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220829/2598a07b2c9c4c4b8e1f03c65918b089.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 7]: /images/20220829/2be1d9b97a564c62910d0674b594906d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 8]: /images/20220829/e178313dc88a4dd6b69922509387a9ac.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 9]: /images/20220829/6f634fe0006749e5ab12decf155c1609.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 10]: /images/20220829/d4429633bc0b4bc9a33c91e99e8f4f12.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 11]: /images/20220829/9661fdd6133a4b7ea1ce8a3a02481d8a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 12]: /images/20220829/d823d9682c0b472aaa87e12c2573e92b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 13]: /images/20220829/e164d0222aad4d4593807f6ed44d6f29.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 14]: https://img-blog.csdnimg.cn/20210905190825662.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5aSp6b6Z6Iez5bCK,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp6b6Z6Iez5bCK_size_20_color_FFFFFF_t_70_g_se_x_16 15]: /images/20220829/375c6ecd95134c62a55dee5f2b53b64b.png