Vue(二十三)webstorm创建vue-cli脚手架项目

1.创建项目

大约五到十分钟后，项目创建完毕。

2.启动项目（1.可以使用命令式：即如下图；2.可视化启动：webstorm右上角的启动按钮和蜘蛛按钮都可以启动）

 

 3.启动可视化UI

Ctr+C关闭项目（如果是可视化启动，点击红色方块停止即可）

黑窗口执行命令：

vue ui

 

4.安装插件（示例：vuex、vue-router）

 

 

 这时候可以看到、后台报错了：

这个是因为eslint语法检查导致的，eslint语法只允许 kebab-case的形式。

所以解决方法有两个：1.重命名About和Home成小写，2.关闭eslint语法检查。

关闭eslint语法检查：在vue.config.js文件中添加一句：lintOnSave: false

 5.静态文件服务器打包

在package.json文件上右键，打开构建可视化窗口

 双击build构建

disk文件夹就是打包好的文件了，只要把disk放到静态文件服务器的根目录即可跑起来了。（打开index.html是空白，本地是无法跑起来的）

 

 6.本地打包。参考我下一篇博文：Vue(二十三)Vue打包到本地运行_苍穹之跃的博客-CSDN博客1.修改vue.config.js文件修改前内容：const {defineConfig} = require('@vue/cli-service')module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false,})修改后内容：// eslint-disable-next-line no-unused-varsconst webpack = require("web.https://blog.csdn.net/wenxingchen/article/details/125018060