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
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.abc.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abc.com/book/id 如果后端缺少对 /book/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”
结合自身例子，对于一般的 Vue + Vue-Router + Webpack + XXX 形式的 Web 开发场景，用 history 模式即可，只需在后端（Apache 或 Nginx）进行简单的路由配置，同时搭配前端路由的 404 页面支持。
本段文字转自：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
版权归原作者 Root_Smile 所有， 如有侵权，请联系我们删除。