创建Vue脚手架并启动出现的报错及解决（总冠军版）

一、赛前准备

准备工作与启动react脚手架不能说相同只能说一摸一样，具体可见 创建react项目并启动出现的报错及解决。

二、正式比赛（勇士总冠军今天！！）

1.全局安装： npm install -g vue-cli

2.切换到想创建项目的目录后，新建脚手架（hello-react）：vue init webpack hello-vue

3.进入项目文件夹：cd hello-vue

4.启动项目：npm run dev/serve

5.暂停项目：Ctrl + C

三、收获奖杯

1、项目成功启动后浏览器会弹出新窗口如下页面：

 2、如果终端出现一下提示，但浏览器没动静说明你项目成功启动：

没有自动弹浏览器页面的话，只需按下图设置后重启项目即可。 

3、报错情况:

在 vue init webpack hello-vue 新建脚手架时可能出现以下报错

npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'...

原因：执行命令行命令时没有获得管理员权限

解决：在该命令前加上 sudo 即：

sudo vue init webpack hello-vue

四、获奖感言

（1） 脚手架文件结构

.文件目录
├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   └── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
└── package-lock.json: 包版本控制文件

（2）Vue的不同版本文件

（3）Vue配置文件 vue.config.js 介绍    

 

// 配置文件简约版

module.exports = {
  pages: {
    index: {
      entry: 'src/index/main.js' // 入口
    }
  },
  lineOnSave: false	// 关闭语法检查
}

（4）附送 vue 中文教程

        介绍 — Vue.js

​​