一、材料

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 -> Settingsmark

让 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