Vue - cli3 脚手架搭建项目步骤流程（windows）

小鱼儿 2023-07-13 10:39 19阅读 0赞

## 安装脚手架 ##

第一步就是先安装 vue 提供的脚手架工具，`终端` 键入以下命令：

npm install -g @vue/cli

等待完成即可，如果 npm 太慢，则可以考虑使用 [npm 换源][npm]。

## 创建项目 ##

安装好脚手架后，接着就可以创建基于 `webpack` \+ `vue` 的前端项目了，键入命令：

# xxx:项目名
    vue create xxx

等待。

--------------------

**一、回车，然后会出现类似下图的选择界面，使用小键盘上的 【↑↓】控制移动：**

1.  default：默认配置（由你自定义的配置）
2.  Manually select features：手动选择（自定义配置）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70]

这里先选择 `Manually select features(手动)` ，回车！

--------------------

**二、紧接着，出现如下图界面，使用小键盘上的 【↑↓】控制移动，【空格】选中：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 1]

1.  Babel：ES6 语法转 ES5 ，大家都懂。
2.  TypeScript：JavaScript 超集，大家都懂。
3.  Progressive Web App(PWA) Support：渐进式的网页应用程序，[详细描述。][Link 1]
4.  Router：路由，大家都懂。
5.  Vuex：状态管理，大家都懂。
6.  CSS Pre-processors：CSS 预处理器(less/sass)
7.  Linter / Formatter：统一代码风格，大家都懂。
8.  Unit Testing：单元测试，基本用不到。
9.  E2E Testing：自动化测试(端对端)，基本用不到。

这里根据自己的需求来选择，回车！

--------------------

**三、然后，提示是否使用路由器的历史模式，如下图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 2]  
路由模式分为 Hash 模式 History(历史) 模式 Abstract 模式三种，hash 模式最明显的特点就是 url 上会带有 \# 号，History 历史模式的 url 就跟正常的访问地址一样。

--------------------

**三、然后，提示选择 CSS 预处理器（sass/less），如下图：**  
![在这里插入图片描述][20210705155120261.png]  
很简单。

--------------------

**三、然后，提示选择配置文件放在哪里，如下图：**  
![在这里插入图片描述][20210705155228306.png]  
babel、postcss、eslint 这些配置文件放哪？

*  in dedicated config files（在专用配置文件中，就是单独管理）
 *  in package.json（放在 package.json）

--------------------

**三、最后，提示是否将该配置存起来，下次直接使用该配置，如下图：**  
![在这里插入图片描述][20210705155355115.png]  
很简单。

--------------------

## 运行 ##

根据命令，跑起来就行了。

[npm]: https://blog.csdn.net/weixin_44198965/article/details/104115024
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70]: /images/20230529/496f705ee02441f79d8c7fdb80cd8d6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 1]: /images/20230529/3c68aea2ed8e417b826fee9ece81f063.png
[Link 1]: https://blog.csdn.net/qq_19238139/article/details/77531191
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 2]: /images/20230529/b29726f10111468ba41119a64e780f32.png
[20210705155120261.png]: /images/20230529/e146f0c64b974e0fa71fa7c8a259e874.png
[20210705155228306.png]: /images/20230529/d3a0936c86464da8b488741dd0d83453.png
[20210705155355115.png]: /images/20230529/995e54d712a04fd2b354fc13207f01a5.png