vue 学习资料
官网教程: https://cn.vuejs.org/v2/guide/
创建项目的脚手架工具vue-cli: https://cli.vuejs.org/zh/guide/
入门视频课程:https://www.imooc.com/learn/980
vue 开发环境
IDE 使用 Intelli Idea,在 Preference -> Plugins -> Marketplace 中搜索插件 "vue.js",安装。
在 Preference -> Editor -> File Types -> HTML 中,添加新的文件后缀 "*.vue"。
在 Preference -> Languages & Frameworks -> JavaScript,选择 ECMAScript6
在 Preference -> Editor -> File and Code Templates 中,创建一个 vue 模版:
<template>
<div> {{msg}}</div>
</template>
<style></style>
<script>
export default{ data () { return {msg: 'vue模板页'} } }
</script>
新建 vue 项目:Static Web -> Vue.js
vue-cli
vue-cli 是搭建 vue 项目的脚手架。
安装、验证:
$ npm install -g @vue/cli
$ npm --version
vue --version
@vue/cli 4.1.2
创建项目:
$ vue create hello-world
构建:
$ cd hello-world
$ npm run serve
$ npm run lint
$ npm run build
项目结构:
$ tree -L 2
public
├── favicon.ico
└── index.html //入口
src
├── App.vue //app
├── assets //资源文件
│ └── logo.png
├── components //vue 组件
│ └── HelloWorld.vue
└── main.js