新手接触 Vue
都有一个认识的过程,下面我为大家写出,我自己写项目的思路,一次次进步,修改形成的项目模板,为自己所在初创公司建立一些前端基础,仅供参考
一、环境
1. node 必须安装,无可厚非
2. 脚手架安装 (vue-cli3)
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 测试)
4. 详细配置
- 路由模式不选择 history
- css 预处理器选择 less
- ESlint 检查风格 Standard
- 保存的时候检查 ESlint
- babel 配置项都放入 package.json
- 是否保存为预设项目
接下去等待项目配置完成就好了
按照图中,直接 npm run serve
就可以运行项目了
下一章,将我们的项目结构改变,让我们的开发更科学,思路更清晰