【Vue】Vue cli

让开发者从纠结配置中解放出来，专注于撰写应用程序，Vue CLI就因此而生。它不仅确保了各种构建工具能够基于智能的默认配置即可平稳衔接，还提供了配置调整的灵活性。

CLI 2

全局安装并创建项目

npm install -g vue-cli
npm install -g vue-cli@x.x.x // 指定安装某一版本

vue init <template-name> <project-name>
# 例如：vue init webpack vue-test

template模板有：

  • browserify——一个全面的Browserify + vueify 的模板，运行起来带有热重载，保存时 lint 校验，单元测试。
  • browserify-simple——一个简单Browserify + vueify的模板，不包含其他功能，让你快速的搭建vue的开发环境。
  • pwa——一个基于webpack模板的渐进式的网页应用程序模板。
  • simple——一个最简单的单页应用模板。
  • webpack——一个全面的webpack + vue-loader的模板，运行起来带有热重载，保存时 lint 校验和CSS扩展。
  • webpack-simple——一个简单webpack + vue-loader的模板，能让你快速搭建一个vue的开发环境。
初始化过程中会确认项目的项目名、作者等信息。

目录结构 2.9.6

 bulid是项目构建的相关代码，config是项目开发环境配置。

参考：https://www.jianshu.com/p/f8430536059a

 

CLI 3

全局安装并创建项目

npm install -g @vue/cli // 全局安装
vue create <project-name> // 创建项目,例如：vue create vue-3.0-demo

// 使用init 初始化项目
npm install -g @vue/cli-init
vue init webpack vue-3.0-demo //`vue init` 的运行效果将会跟 `vue-cli@2.x` 相同

相应配置选择

 

 

babel必须，可以转换ES6语法

router路由

vuex状态管理器

css预处理

linter管理代码风格

 

ESLint 是一个语法规则和代码风格的检查工具，可以检测出你代码中潜在的问题，可以保证写出语法正确和风格统一的代码。

  • ESLint with error prevention only——只检测错误。
  • ESLint + Airbnb config——独角兽公司的Airbnb，有人评价说“这是一份最合理的JavaScript编码规范”，它几乎涵盖了JavaScript的各个方面。
  • ESLint + Standard config——standardJs一份强大的JavaScript编码规范，自带linter和自动代码纠正。没有配置。自动格式化代码。可以在编码早期发现规范问题和低级错误。
  • ESLint + Prettier—— Prettier 作为代码格式化工具，能够统一整个团队的代码风格。
lint有两种检查时机，一是用户保存文件的时候，二是用户提交文件到git的时候。
倒数第二个问题：Babel、ESLint等配置信息全放在package.json文件里呢，还是单独文件管理？看需求
最后一个问题：手动选择的preset保存为未来项目的preset？保存
 

目录结构

官方内置了一个CLI服务（@vue/cli-service），作为一个开发环境的依赖，局部安装在@vue/cli创建的项目中。
若想修改webpack的相关配置，可在项目的根目录下（和package.json同级）创建一个vue.config.js配置文件，这个文件一旦存在就会被@vue/cli-service自动加载。也可直接使用package.json中的vue字段。

修改端口号配置，参考：https://blog.csdn.net/qq_39313596/article/details/83544745

 devServer: {
        open: process.platform === 'darwin',
        host: '127.0.0.1',
        port: 9099,
        https: false,
        hotOnly: false,
        proxy: null, // 设置代理
        before: app => {}
  },

　　

 

 

package.json文件就是对项目或者模块包的描述。

  • 重要字段
    • name：项目模板名字，长度必须小于等于214个字符，不能以.(点)或者_(下划线)开头，不能包含大写字母
    • version：项目版本号
  • 信息类字段
    • description：项目描述
    • keywords：项目关键字。帮助人们在使用npm search时找到这个包
    • license：软件授权条款，让用户了解他们在什么授权下使用此包，以及此包还有哪些附加限制
  • 链接类字段
    • homepage：包的项目主页或者文档主页
    • bugs：项目问题反馈的Url或者Email配置
    • repository：代码托管的位置
  • 项目维护
    • author：项目开发者，是https://npmjs.org网站的有效账户名，遵循"账户名<邮件>"的规则
    • contributors：项目贡献者
  • 文件类信息
    • files：项目包含的文件，可以是单独的文件、整个文件夹，或者通配符匹配到的文件。
    • main：程序入口文件，默认为根目录index.js,当require('webpack')，默认加载lib目录下webpack.js
    • bin：随着项目一起被安装的可执行文件。
    • man：和项目相关的文档页面
    • directories：当你的包安装时，你可以指定确切的位置来放二进制文件、man pages、文档、例子等。
  • 任务类字段
    • scripts：执行npm脚本命令简写
    • config：配置你的脚本的选项或参数
  • 依赖描述字段
    • dependencies：项目运行时所需依赖（开发和发布版）
    • devDependencies：开发环境所需依赖包，生产环境不会被安装的包
  • private：是否私有，true时npm拒绝发布
  • module：模块化方式进行加载
  • eslintConfig：EsLint检查文件配置，自动读取验证。
  • engines：声明项目需要的node或者npm版本范围
  • browserslist：拱浏览器使用的版本列表
  • style：拱浏览器使用时，样式文件所在的位置

 

参考文档：https://blog.csdn.net/weixin_44135121/article/details/91674772

posted @ 2020-01-10 16:51  把我当做一棵树叭  阅读(238)  评论(0)    收藏  举报