Web Developer

Vue-cli 工具快速构建Vue框架

2018-09-10  本文已影响0人  方寸拾光


本文适合对vue框架和webpack打包有一定了解,想要快速开发vue项目的工程师(如果想从基本vue框架手动配置学习webpack的童鞋请移步这里 Framework Vue 框架)下面开始vue-cli快速开发旅程

1、下载安装vue-cli

npm install vue-cli -g

2、初始化项目文件

vue init Project-Name

初始化是会提示以下内容:

    Project name (Project-Name)     //项目名称

    Project description (A Vue.js project)  //项目描述

    Author (........)       //作者

    Runtime + Compiler: recommended for most users    //运行加编译

    Install vue-router? (Y/n)    //是否安装vue-router

    Use ESLint to lint your code? (Y/n)      //是否使用ESLint管理代码

    Pick an ESLint preset (Use arrow keys)    //选择一个ESLint预设(选择)

    Standard (https://github.com/feross/standard)    标准

附:文档树

    src //项目源文件

        assets  //资源文件夹

        components //组件集

        router // 路由文件

    config //配置文件

    build //开发、测试及发布脚本文件

    ......

3、进入项目文件夹,安装所需依赖

cd Project-Name //进入项目

npm install //安装依赖

4、运行、发布已安装好的项目

npm run dev //开发脚本

npm run build //发布脚本

运行后的效果图:

持续更新中(欢迎评论指正).....

上一篇下一篇

猜你喜欢

热点阅读