zoukankan      html  css  js  c++  java
  • 认识vue到简单上手

     

    首先来认识一下什么是vue ,有什么功能。我们可以用它来做什么。进一步简单认识一下它的项目结构。

    1、vue是什么?

    vue指的是vue.js框架。Vue.js是一款流行的JavaScript前端框架,一个用于创建用户界面的开源JavaScript框架,旨在更好地组织与简化Web开发。

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

    2、vue能做什么?

    Vue.js能让基于网页的前端应用程序开发起来更加方便

    vue可以简单写单个页面,也可以写一个大的前端系统。

    Vue可以做从简单到复杂的前端单页应用,随处可见的Web前端都可以用Vue来开发。

    Vue上手速度快、功能强大,且提供了非常好用的脚手架vue-cli,很简单就可以构建并让自己的项目跑起来。

    3、vue的结构?

                 

    项目结构主要在src文件夹中。

    整体的介绍项目结构:

    • node_modules :这个目录存放的是项目的所有依赖,即npm install命令下载下来的文件。
    • src:这个目录存放的项目的源代码,及开发者写的代码放在这里。
    • static:这个目录用来存放静态资源。
    • package.json:这个文件中定义了项目的所有依赖,包括开发时依赖和发布时依赖。

     src 中的结构:

    • assets:目录用来存放资产文件。
    • components:目录一般用来存放组件(一些可复用,非独立的页面)。
    • router:目录中,存放了路由的js配置文件。
    • views:(可以放置到文件夹中,也可以直接书写在目录中)vue组件。
    • app.vue:是一个vue组件,也是项目的第一个vue组件。
    • main.js:相当于java 中的main方法,是整个项目的入口js。(在此文件中1. 首先需要导入vue对象 2. 导入app.vue 并命名为app 3.导入router  4.以上导入完成后 创建一个vue对象,设置要被vue处理的节点是#app )

    4、项目使用前要配置一些环境以及插件。

    vscode 配置插件:

    • vscode 配置html css js 颜色主题 中文语言,等等基础插件。

        open in browser
        Path Intellisense
        Auto Close Tag
        Live Server
        css peek
        HTML CSS Support
        Auto Rename Tag
        Color Highlight
        Beautify
        //文件图标主题
        vscode-icons
        //颜色主题
        Atom One Dark Theme
        One Dark Pro
        //代码执行
        Code Runner

    • vue的插件:

    vue 2 Snippets

    Vetur

    配置node.js

    • 1.先安装node.js
    • 2.在cmd中配置npm仓库

              npm config set registry https://registry.npm.taobao.org --global
              npm config set disturl https://npm.taobao.org/dist --global

    • 3.在vscode中查看是否安装成功

                  npm -v

    开发环境npm 的配置

    //设置npm仓库为淘宝   (因为npm 的镜像仓库在国外,下载东西会很慢,设置为国内淘宝时下载速度会提升)
    npm config set registry https://registry.npm.taobao.org --global
    npm config set disturl https://npm.taobao.org/dist --global
    npm install -g @vue/cli
    //1.安装cnpm
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    //2.vue-cli
    cnpm install -g @vue/cli

    5、使用vue-cli脚手架 创建一个vue项目并启动。

    //使用窗口创建
    vue --version  查看是否有输出
    vue create 01vue-demo  创建文件夹
     
    启动项目
    1.使用vscode将项目打开
    2.npm run serve  或者 yarn serve(使用yarn serve时需要安装yarn )

  • 相关阅读:
    Oracle->oracle单实例Shell脚本[20180122]
    oracle 11g grid软件安装[20180121]
    MySQL-5.7.20主从复制测试[20180110]
    Sonarqube中文插件-Linux[20180105]
    Sonar安装-Linux[20171227]
    (Linux 日常命令)[20171225]
    ThreadLocal的实现机制
    LruCache源码分析
    命令提示符怎么以管理员方式打开
    Eslint 从入门到放弃 http://blog.csdn.net/fay462298322/article/details/74931092
  • 原文地址:https://www.cnblogs.com/lishuge/p/13522173.html
Copyright © 2011-2022 走看看