美文网首页
vue+webpack项目搭建

vue+webpack项目搭建

作者: 张德瘦嬢嬢 | 来源:发表于2021-02-02 15:39 被阅读0次

    vue-cli 搭建项目

    $ npm install -g vue-cli
    $ vue init webpack my-project  
    
    ? Project name xx
    ? Project description zds xx
    ? Author xx@qq.com
    ? Vue build (Use arrow keys)
    > Runtime + Compiler: recommended for most users
      Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
          ? Vue build standalone
    ? Install vue-router? Yes安装路由
    ? Use ESLint to lint your code? Yes代码检查
    ? Pick an ESLint preset Standard
    ? Set up unit tests No
    ? Setup e2e tests with Nightwatch? No
    ? Should we run `npm install` for you after the project has been created? (recommended) npm
    ? //安装依赖,稍安勿躁
    

    Vue init webpack 创建项目选项详解

    一、Project name :项目名称,如果不需要就直接回车。注:此处项目名不能使用大写。
    二、Project description:项目描述,直接回车
    三、Author :作者
    四、vue build 构建方式(暂且这么解释)
      两个选择(上下箭头选择,回车即为选定)(是使用阉割版的vue还是使用完整版的vue 第一个是完整版的 第二个是阉割版的)
      1.Runtime + Compiler:recommended for most users
      (译:运行+编译:被推荐给大多数用户)
      2.Runtime-only:about 6KB lighter min+gzip,but templates (or any Vue-specific HTML) are ONLY
      allowed in .vue files-render functions are required elsewhere
      (译:只运行大约6KB比较轻量的压缩文件,但只允许模板(或任何VUE特定HTML)。VUE文件需要在其他地方呈现函数。翻译不精准,意思大概是选择该构建方式对文件大小有要求)
      这里推荐使用1选项,适合大多数用户的
    五、install vue-router?是否安装vue的路由插件,需要就选y,否则就n(以下均遵循此方法)
    六、Use ESLint to lint your code?是否使用ESLint检测你的代码?
      (ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。)
    七、Pick an ESLint preset:选择分支风格
      选项有三个
      1.standard(https://github.com/feross/standard) js的标准风格
      2.Airbnb(https://github.com/airbnb/javascript) JavaScript最合理的方法,这个github地址说是JavaScript最合理的方法
      3.none (configure it yourself) 自己配置
    八、Set up unit tests? 是否安装单元测试(暂不详细介绍)
    Pick a test runner 选择一个单元测试运行器
    选项有三个
    1.Jest(Jest是由Facebook发布的开源的、基于Jasmine的JavaScript单元测试框架)
    2.Karma and Mocha
    3.none
    九、Setup e2e tests with Nightwatch(Y/n)?是否安装E2E测试框架NightWatch(E2E,也就是End To End,就是所谓的“用户真实场景”。)
    Should we run ‘npm install’ for you after the project has been created?(译:项目创建后是否要为你运行“npm install”?这里选择包管理工具)
      选项有三个
      yes,use npm(使用npm)
      yes,use yarn(使用yarn)
      no,I will handle that myself(自己配置安装包)

    $ cd xx
    $ npm run dev
    

    目录结构

    image.png

    相关文章

      网友评论

          本文标题:vue+webpack项目搭建

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