搭建vue脚手架 以及 npm ERR! missing script: serve解决方法

目录

vue脚手架搭建

npm ERR! missing script: serve解决方法

---

vue脚手架搭建

前提是安装好vue，可以先输入下面这行代码检查是否安装vue

vue --version    

 安装成功则显示  @vue/cli 4.5.14

没有显示的话就依次输入下面两行代码，安装vue，安装完成后输入上面的代码检查一下

    npm install -g vue 
    npm install -g @vue/cli-init

ps：如果执行第二行代码报错后可以把npm换成cnpm试试

在存放项目的文件夹打开终端

输入vue create cms-ui 创建 cms-ui是它的名字，

执行后出现配置信息，使用上下键移动光标，回车确定

这里我们选择的是 Manually select features（手动配置） 回车后开始配置

上下键移动光标，使用空格勾选需要的配置选项，这里我们勾选了vue version、babel（基础转换）、router、vuex

然后选择vue版本，光标移动到vue version后回车确认

 

按上图选项选择就好，版本选择的3.x，然后我们并没有选择history服务，因为如果选择的话还需要配置服务器，为了简单我们就选择了no，之后我们将配置保存在package.json文件中，最后给它起一个好听的名字就好啦“vue3+vuerouter+vuex”

 ps：发现中间配置错误，可以使用ctrl + c终止操作哦

最后可以使用npm run dev 查看是否能成功运行，如下图就是成功啦

npm ERR! missing script: serve解决方法

这时有的小伙伴可能会出现如上错误，大概意思就是执行的脚本丢失，就是配置文件中的服务器名称与启动命令中的名称不匹配

错误原因有可能是

1.搭建好后没有执行“cd + 脚手架名 ”，没有进入项目根目录

解决方法  cd cms-ui 或者直接在文件夹选择进入终端执行命令

2.node_modules出现问题，可能是工具包出现错误，或者干脆就没有（node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。比如webpack、gulp、grunt这些工具。在node.js中模块与文件是一一对应的，也就是说一个node.js文件就是一个模块）

解决方法：删除原node_modules，重新执行 npm install

3.配置文件中的服务器名称与启动命令中的名称不匹配

解决方法：查看配置文件package.json 中服务器名称，并修改启动命令

如上图所示，我的配置文件中启动命令是serve，所以在我输入 npm run dev后就报错，输入npm run serve则执行成功

修改之后重新启动就好啦

最后感谢下面两位大佬的解决方法，给了我参考ヽ(￣▽￣)ﾉ

  启动vue项目报错：npm ERR! missing script: serve解决方法

        【踩坑】npm ERR! missing script: serve 

 vue脚手架解析

 webpack核心配置文件：vue.config.js

打包后就出现一个名为dist的文件夹

vue-ui 图形化操作界面

cnpm install axios qs --sava 安装依赖 axios、qs

安装依赖elementplus

百度输入elementplus，进入官网，点击指南，找到安装，在终端输入

npm install element-plus --save

装好之后点击快速开始，在main.js文件中引入并使用

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')