从零开始 Vue 01 | 构建第一个 Vue 项目

一、材料

nodejs （参考：一步一步安装及配置 Node.js 与 NPM）

phpstorm （https://www.jetbrains.com/phpstorm/）

二、配置

1.配置node与npm

phpstorm -> File -> Settings

输入npm，设置node与npm的安装路径

mark

2.配置eslint

eslint是编程书写规范，可以让代码更简洁，具有更好的可读性

phpstorm -> File -> Settings

mark

让 js 代码符合 eslint 风格

mark

三、创建项目

1.安装

安装 Vue 脚手架

官方文档：https://cli.vuejs.org/zh/guide/

npm install -g @vue/cli

2.创建

开始会问需要连接的仓库，这里是淘宝的仓库，直接回车选择默认

mark

3.构建

进入脚手架构建选项，这里选择default

这里上下选择，回车确定

mark

4.选择安装模块

安装常用的模块

mark

操作： 上下选择，空格选择，回车选择完成并确定 选项的介绍： Babel： 可以将ES6语言，转化为低版本浏览器支持的ES5语言 TypeScript： 使项目兼容各种操作系统的各种浏览器的一种语言 Progressive Web App (PWA) support：离线应用开发方式 Router：路由相关模块 Vuex：复杂状态管理模块 CSS Pre-processors：Sass和Less支持 Linter/Formatter：用来保持风格一致性 Unit Testing：测试用 E2E Testing：测试用

过程如下：

选择路由模式，回车选择默认

mark

选择CSS预处理器，回车选择默认

选择代码风格，这选择标准配置

mark

代码风格自动修复，这里需要Git支持

mark

git 安装：https://blog.csdn.net/u011262253/article/details/97507271

不同模块的配置文件是否分开保存，这里选择分开保存

mark

要不要将以上的配置保存，如果保存下次就不需要一个一个来选择。输入y回车，输入保存文件名回车

mark

5.下载模块构建项目

mark

6.安装成功会显示

mark

四、运行项目

1.启动开发环境

三种方法：

• .命令行

npm run serve

• main.js

mark

• 工具

mark

2.在浏览器输入对应的网址

mark

3.浏览器会显示

mark