项目构建

• 在webstorm中打开终端，进入项目目录
• 输入 vue init webpack pytools-fe-ver1.0 初始化项目
• 项目名称为pytools-fe-ver1.0
• 添加项目描述，作者
• runtime选择第一项’Runtime + Compiler’,按空格切换，按回车确认
• Install vue-router 选择Y
• Use ESLint to lint your code? 选择Y
• Standard 选择’Stander’
• Set up unit tests 选择N
• Set up e2e tests 选择N
• Should we run npm install for you after the project has been created? 选择’Yes,use npm’
• 初始化项目完成
• cd pytools-fe-ver1.0 进入项目目录
• webstorm右上角点击 添加配置
• 点击加号添加新配置
• 选择npm,选择package.json，自动添加文件位置;脚本,选择 dev ，点击应用
• 点击右上角运行，即可在浏览器中看到vue构建完成的欢迎界面
• 默认浏览器选择谷歌浏览器
• 在谷歌浏览器的扩展商店中安装vue-devtools插件
• 在浏览器的开发者工具中将Disable cache(禁用缓存)勾选上
• 在webstorm中将ESlint设置为自动ESLint配置，规范编码格式

目录结构

Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----        2022/5/26     21:35                build
d-----        2022/5/26     21:35                config
d-----        2022/5/26     21:36                node_modules                                                  
d-----        2022/5/26     21:35                src
d-----        2022/5/26     21:35                static
-a----        2022/5/26     21:35            230 .babelrc                                                      
-a----        2022/5/26     21:35            147 .editorconfig
-a----        2022/5/26     21:35             30 .eslintignore
-a----        2022/5/26     21:35            791 .eslintrc.js
-a----        2022/5/26     21:35            154 .gitignore
-a----        2022/5/26     21:35            246 .postcssrc.js
-a----        2022/5/26     21:35            279 index.html                                                    
-a----        2022/5/26     21:36        1165135 package-lock.json
-a----        2022/5/26     21:35           2209 package.json
-a----        2022/5/26     21:35            503 README.md

项目仓库

Gitee