1.安装node js
Node.js — 在任何地方运行 JavaScript (nodejs.org)
2.测试nodejs是否安装成功
node -v
npm -v
3.通过npm 安装 vue
npm install -g @vue/cli
4.测试vue是否安装成功
vue --version
5.打开PyCharm，创建项目：flask-web
vue create flask-web
6.选择配置
- 可以选择一个默认的配置：Vue2 Vue3
- 也可以手动选择需要的配置项：Manually select features
7.如果选择自定义配置请往下看，默认配置跳到17.
为项目选择需要的配置项，按空格键选中，a子母键全选，i子母键反选，回车键确定到下一步
- Babel 支持babel(选上)
- TypeScript 安装ts（选上）
- Progressive Web App (PWA) Support（一般不选）
- Router 路由模块（选上）
- Vuex 状态管理（需要用到就选上）
- CSS Pre-processors css预处理器（选上）
- Linter / Formatter 代码校验（选上）
- Unit Testing 单元测试（一般不需要）
- E2E Testing 端到端测试（一般不用）
8.选择vue的版本可以选2.x也可以3.x
9.如果上面选择了安装TypeScript，就会有这一步 class-style component syntax 是否使用class类风格编码，选y
10.是否使用TypeScript和Babel的形式编译 JSX.选择n
11.是否使用history路由模式，默认是hash模式，hash模式会在url后面带#f符号，选y
本段文字转自：https://www.jb51.net/article/144341.htm
12.选择css预处理器类型。node-sass 是自动编译实时的，dart-sass 需要保存后才会生效，此处建议选择 Sass/SCSS(with dart-sass)，即直接选择回车即可。
13.选择一个代码校验配置支持代码风格检查和格式化。此处建议选择默认配置，即直接回车即可。
- ESLint with error prevention only （仅具有错误预防功能）
- ESLint + Airbnb config （Airbnb配置）
- ESLint + Standard config （标准配置）
- ESLint + Prettier （Prettier）
14.什么时候校验格式。此处建议选择第一个，即直接回车即可
- Lint on save（保存时）
- Lint and fix on commit（提交时）
15.选择配置文件的位置，因为每个插件都有自己单独的配置文件，选择第一个
16.是否将当前配置选项保存起来，方便下次创建项目时使用，选n
17.所有配置选择完，项目创建成功
启动：
cd flask-web
npm run serve
访问http://localhost:8081，进入如下页面说明配置成功
18.（有需要的话）下载element组件
组件 | Element
Vue的版本不同用的代码不一样
Vue2：npm i element-ui -S
如果报错，使用npm i element-ui -S --legacy-peer-deps
Vue3：npm install element-plus --save
具体配置见：https://blog.csdn.net/dxnn520/article/details/123867408
参考博文：https://blog.csdn.net/weixin_45032067/article/details/126356391
