美文网首页
新建一个vue项目及目录介绍

新建一个vue项目及目录介绍

作者: 一个小前端程序员 | 来源:发表于2018-11-15 13:39 被阅读0次

    作为一个刚入门的前端开发人员,掌握了html、css、js、jquery等基础,就要开始进阶学习使用一些框架,我选择的是vue框架,Vue是一套用于构建用户界面的渐进式框架,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。在这里我会分享我的一些vue学习和使用心得,和大家一起学习vue。

    一、新建一个vue项目
    前提条件:已安装node可以正常使用npm命令,并全局安装vue-cli工具。

    npm install vue-cli -g
    

    1.创建项目
    使用vue初始化基于webpack的新项目

    vue init webpack my-project(你的项目名称)
    

    2.进行安装

    Project name my-project
    Project description A Vue.js project
    Author lzh <****@qq.com>
    Vue build (Use arrow keys)
    Vue build standalone
    Install vue-router? Yes
    Use ESLint to lint your code? No(除这三个外,其他的都回车)
    Set up unit tests No
    Setup e2e tests with Nightwatch? No
    

    3.运行项目

    cd my-project
    npm run dev
    

    二、目录简介
    主要的文件都是放在src中
    1.在src/assets中新建css、img、js文件夹
    2.src/components中存放自己的vue组件
    3.src/router存放路由配置信息
    4.src/lib存放模拟的数据
    5.新建src/store存放vuex
    6.新建src/views存放路由组件

    相关文章

      网友评论

          本文标题:新建一个vue项目及目录介绍

          本文链接:https://www.haomeiwen.com/subject/yhowtqtx.html