Vue-入门

注意以下代码都是compiler版本的代码，如果是runtime版本的话在main.js程序入口会有一些区别，区别如下。

comiler版本

new Vue({
  el: "#app",
  component:{
    App
  },
  render: h=>h(App),
  router
})

runtime版本

const app = new Vue({
  router
}).$mount('#app')

一、通过WebStorm创建Vue项目

创建WebStorm的Vue项目一般默认是compiler版本，请注意程序入口的编写。然后我额外添加了auth目录（看您需求），大致目录如下

.
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── app
│   │   └── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── auth
│   │       ├── login
│   │       │   └── LoginForm.vue
│   ├── main.js
│   └── router
│       └── main.js

src目录下的main.js就是程序入口

components目录一般存放各种template

app目录一般存放最开始生成的App.vue

router目录下一般放一个router.js用于返回路由列表信息