vue-cli3初始化仓库

迷南。 2022-02-13 13:53 229阅读 0赞

## 全局安装vue-cli ##

cnpm install -g @vue/cli

### 检测是否安装成功 ###

vue --vesion

## 新建项目 ##

创建一个 名字为hello-world的项目

vue create resource-share

### 创建要给项目 如果不愿意用命令行，还可以用图形界面 ###

vue ui

## 选择配置 ##

如果不使用UI界面，会是这样  
![如果不使用UI界面，会是这样][UI]

如果你上一次配置并保存了这里就会指向一个你上次保存的名字，第一次执行create是没有的  
按键盘上下键可以选择默认（default）还是手动（Manually），如果选择default，一路回车执行下去就行了  
继续手动一下

## 选项配置 ##

![手动配置][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70]  
当你选择后会出现上面图上的东西，这里你可以自由选择用哪些配置，按上下键  
选择哪一个，按空格键确定，A键是全选，所有的都选择好后，按enter键进行下一步

在选择功能后，会询问更细节的配置，

*  Babel：将ES6编译成ES5
 *  TypeScript：JS超集，主要是类型检查
    
     *  是否使用class风格的组件语法：Use class-style component syntax?
     *  是否使用babel做转义：Use Babel alongside TypeScript for auto-detected polyfills?
 *  Progressive Web App（PWA）Support：渐进式WEB应用支持
 *  Router：路由
 *  Vuex：状态管理
 *  Linter/ Formatter：代码检查工具
    
     *  选择Linter / Formatter规范类型：Pick a linter / formatter config
     *  选择lint方式，保存时检查/提交时检查：Pick additional lint features
 *  CSS Pre-processors：css预编译
    
     *  选择CSS 预处理类型：Pick a CSS pre-processor
 *  Unit Testing：单元测试，开发过程中前端对代码进行自运行测试
 *  E2E Testing: 端对端测试，属于黑盒测试，通过编写测试用例，自动化模拟用户操作，确保组件间通信正常，程序流数据传递如预期。

我们的选择如下  
![选择][20190428085630242.png]

## 由于我已经安装了vue-router,他会问这么一句 ##

`Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)`  
我们这里先选择no

此处详情：[history与hash模式][history_hash]

## 选择css预处理工具 ##

![选择css预处理工具][css]  
我是用less

## 代码检查与自动化代码格式 ##

![代码检查与自动化代码格式][20190428094505535.png]

*  eslint w…: 只进行报错提醒；（如果还没熟悉eslint,推荐使用此模式）
 *  eslint + A…: 不严谨模式；
 *  eslint + S…: 正常模式
 *  eslint + P…: 严格模式；

上面这个是问你选择哪个自动化代码格式化检测，配合vscode编辑器的  
Prettier - Code formatter插件，我选的随后一个

## 是否保存设置 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70 1]

*  这里第一个选项是问你是否保存刚才的配置，选择确定后，你下次再创建新项目就有你以前选择的配置了，不用重新再配置一遍了
 *  第二个保存时检查/提交时检查：Pick additional lint features

我不选择第一项,不用保存配置，选择第二项

## 配置文件放哪 ##

![配置文件放哪][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70 2]  
上边这俩意思问你像，babel,postcss,eslint这些配置文件放哪？  
第一个是：放独立文件放置  
第二个是：放package.json里  
这里推荐放单独配置文件，选第二个

## 上面的所有配置是否保存？ ##

![上面的所有配置是否保存？][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70 3]

上边问你是否将以上这些将此保存为未来项目的预配置吗？  
如果选择是的话，会出一个描述项目，你随意选择，点击确定就开始下载模板了  
![配置描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70 4]

之后回扯就好了  
![安装过程][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70 5]

## 项目启动 ##

$ cd resource-web
     $ npm run serve

[UI]: /images/20220213/e2c8e8bb7d794621be915db3840d09b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70]: /images/20220213/02bc561227ba41a29759a4df9a03eb9b.png
[20190428085630242.png]: /images/20220213/ff8157f23b4944a8a9d69ce0e15c9531.png
[history_hash]: https://blog.csdn.net/Gabriel_wei/article/details/89631787
[css]: /images/20220213/9da44bb48ec643dd82929038d53ab3e4.png
[20190428094505535.png]: /images/20220213/148f981cd9fc49d58fd150cd32a2f7a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70 1]: /images/20220213/d4b2d47f0abd47cab992cb7f3293bb5d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70 2]: /images/20220213/bbf8416fdddf4e71a16aea6c75ee870e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70 3]: /images/20220213/48c034f58bd34049aeb9aabc81f3f250.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70 4]: /images/20220213/41502c2e72704a18afd24aee9c595133.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70 5]: /images/20220213/c4458984a67044ac9fae4a1954f74122.png