美文网首页
vue2 — 使用vue-cli创建vue2项目

vue2 — 使用vue-cli创建vue2项目

作者: 守心向暖 | 来源:发表于2017-05-16 15:57 被阅读0次
    • npm安装vue-cli
    npm install -g vue-cli
    
    • 创建vue2项目
    vue init <template-name> <project-name>
    // template-name可选项:webpack、webpack-simple、browserify、browserify-simple、simple
    // project-name: 创建项目的名称,缺省默认在当前目录初始化项目信息
    

    vue-cli使用详情:https://github.com/vuejs/vue-cli

    • 基于webpack创建的项目结构


      vue-cli初始化创建的项目结构
    build: webpack打包相关配置信息
    config: 环境配置信息
    package.json: 依赖项配置文件
    index.html: 首页
    src: 项目源码存放
    static: 静态资源文件存放目录
    src/main.js: 入口文件
    src/App.vue: App根节点
    
    • 安装及运行
    // 切入到项目目录
    cd project-name  
    // 安装依赖
    npm install 
    // 编译
    npm run build
    // 启动dev
    npm run dev
    或npm run start
    

    启动后会自动在浏览器打开:http://localhost:8080/#/,显示以下画面:

    启动效果

    下一篇: vue2 — 根据需要做点改动

    相关文章

      网友评论

          本文标题:vue2 — 使用vue-cli创建vue2项目

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