• 使用 vue-cli(脚手架)搭建项目


    一、使用 vue-cli(脚手架)搭建项目

    1) Vue-cli 是 vue 官方提供的用于搭建基于 vue+webpack+es6 项目的脚手架工具 

    2) 在线文档:https://github.com/vuejs/vue-cli 

    3) 操作: (mypro 是自定义名称)

    npm install -g vue-cli 
    
    vue init webpack mypro
    
    cd mypro
    
    npm install npm run dev
    
    访问: localhost:8080

    二、项目结构分析

    mypro

    |-- build : webpack 相关的配置文件夹(基本不需要修改)
    
    |-- config: webpack 相关的配置文件夹(基本不需要修改)
    
      |-- index.js: 指定的后台服务的端口号和静态资源文件夹
    
    |-- node_modules
    
    |-- src : 源码文件夹
    
      |-- main.js: 应用入口 js
    
    |-- static: 静态资源文件夹
    
    |-- .babelrc: babel 的配置文件
    
    |-- .editorconfig: 通过编辑器的编码/格式进行一定的配置
    
    |-- .eslintignore: eslint 检查忽略的配置
    
    |-- .eslintrc.js: eslint 检查的配置
    
    |-- .gitignore: git 版本管制忽略的配置
    
    |-- index.html: 主页面文件
    
    |-- package.json: 应用包配置文件
    
    |-- README.md: 应用描述说明的 readme 文件

    三、编码测试与打包发布项目

    1) 编码测试

      npm run dev

      访问:http://localhost:8080 编码, 自动编译打包(HMR), 查看效果

    2) 打包发布

      npm run build

      npm install -g serve

      serve dist

      访问:http://localhost:5000

  • 相关阅读:
    C语言寒假大作战02
    C语言寒假大作战01
    C语言I作业12
    C语言I博客作业11
    C语言I博客作业10
    C语言I博客作业09
    C语言I作业08
    C语言ㅍ作业01 结构:通讯录
    C语言寒假大作战04
    C语言寒假大作战03
  • 原文地址:https://www.cnblogs.com/flywong/p/10892662.html
Copyright © 2020-2023  润新知