前端框架 vue 快速极简入门

本篇目录

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> </div>

</template>

<style></style>

<script>

    export default{ data () { return {msg: 'vue模板页'} } }

</script>

新建 vue 项目:Static Web -> Vue.js

vue 实例

vue 实例直接让我们看到 vue 的本质。用 new 创建一个 vue 实例,el 设置绑定的 dom,data 是绑定的 dom 中可以使用的变量。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>My first Vue app</title>
    <script src="https://unpkg.com/vue"></script>
</head>

<body>
<div id="root">  <!-- vue 实例的挂载点 -->
        <!-- 挂载点内部的内容是模版,既可以写在挂载点,也可以写在实例的 template 中 -->
</div>   

<script>
    new Vue ({
        el: "#root",
        data:{
            msg: "hello world 2"
        }
    })
</script>
</body>
</html>

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

参考

  1. 李佶澳的博客
  2. Intellij IDEA搭建vue-cli项目
  3. vue-cli

推荐阅读

赞助商广告

Copyright @2011-2019 All rights reserved. 转载请添加原文连接,合作请加微信lijiaocn或者发送邮件: [email protected],备注网站合作

友情链接:  李佶澳的博客  小鸟笔记  软件手册  编程手册  运营手册  爱马影视  网络课程  奇技淫巧  课程文档  精选文章  发现知识星球  百度搜索 谷歌搜索