Vue 新手搭建项目以及基于 Vue cli 项目最佳实践（一）环境篇

最新推荐文章于 2022-09-08 11:03:13 发布

weixin_34014555

最新推荐文章于 2022-09-08 11:03:13 发布

阅读量148

点赞数

文章标签： javascript 前端 json ViewUI

原文链接：https://juejin.im/post/5cee4107f265da1bb7764bd5

版权

新手接触 Vue 都有一个认识的过程，下面我为大家写出，我自己写项目的思路，一次次进步，修改形成的项目模板，为自己所在初创公司建立一些前端基础，仅供参考

一、环境

1. node 必须安装，无可厚非

nodejs.org/zh-cn/

2. 脚手架安装 (vue-cli3)

cli.vuejs.org/

npm install -g @vue/cli
# OR
yarn global add @vue/cli
复制代码

二、创建项目

这里我认为读者已经了解 vue-cli 相关内容，这时我们打开命令行工具

操作提示：（上下箭头移动，空格选择，回车确认）

1. 创建一个名为 first-project 的项目

$ vue create first-project

2. 自动或手动配置

第一步完成回车之后，会弹出下面内容

忽略其他，第一次用的人会有两个选择如框中所示我们选择第二个 Manually select features

3. 项目配置选择

我们选择常用的配置，如下

 ◉ Babel
 ◯ TypeScript           (支持 TypeScript 书写源码)
 ◯ Progressive Web App (PWA) Support    (Support PWA 支持)
 ◉ Router               (支持路由 vue-router)
 ◉ Vuex                 (支持状态管理 vuex)
 ◉ CSS Pre-processors   (支持 CSS 预处理器)
 ◉ Linter / Formatter   (支持代码风格检查和格式化)
 ◯ Unit Testing         (支持单元测试)
 ◯ E2E Testing          (支持 E2E 测试)
复制代码