vue-cli脚手架创建项目遇到的坑及解决

npm uninstall vue-cli -g //3.0以下卸载：
npm uninstall @vue/cli -g // 3.0以上卸载：

npm view vue-cli versions --json // 3.0以下vue-cli可安装版本查看
npm view @vue/cli versions --json // 3.0以上vue-cli可安装版本查看

npm install vue-cli@2.9.6
npm install -g @vue/cli@4.5.15

vue -V

npm remove -g  @vue/cli // 卸载
npm install -g @vue/cli@4.5.15 // 重新安装

yarn global add @vue/cli
# OR
npm install -g @vue/cli

vue -V
//总结: 如果出现版本号就安装成功, 否则失败

# vue和create是命令, vuecli-demo是自己的文件夹名
vue create vuecli-demo

cd vuecil-demo
 
yarn serve
# 或 npm run serve

 vuecil-demo         # 项目目录
    ├── node_modules # 项目依赖的第三方包
    ├── public       # 静态文件目录
      ├── favicon.ico# 浏览器小图标
      └── index.html # 单页面的html文件(网页浏览的是它)
    ├── src          # 业务文件夹
      ├── assets     # 静态资源
        └── logo.png # vue的logo图片
      ├── components # 组件目录
        └── HelloWorld.vue # 欢迎页面vue代码文件 
      ├── App.vue    # 整个应用的根组件
      └── main.js    # 入口js文件
    ├── .gitignore   # git提交忽略配置
    ├── babel.config.js  # babel配置
    ├── package.json # 依赖包列表
    ├── README.md    # 项目说明
	└── yarn.lock    # 项目包版本锁定和缓存地址

/* 覆盖webpack的配置 */
module.exports = {
  devServer: { // 自定义服务配置
    open: true, // 自动打开浏览器
    port: 3000
  }
}